ausrichten div Elemente nächstes und untereinander

ich will 4 div Boxen so auszurichten, dass sie in einem 2x2-Layout wie dieseausrichten div Elemente nächstes und untereinander

1 2 
3 4

Mein Code wie diese

<div style="width:300px;height:300px;float:left;"> DIV 1 </div> 

<div style="width:300px;height:300px;float:left;"> DIV 2 </div> 

<div style="width:300px;height:300px;clear:left;"> DIV 3 </div> 

<div style="width:300px;height:300px;float:left;"> DIV 4 </div>

sieht sind die die produzieren folgendes Layout:

1 2 
3 
4

Kann mir jemand dabei helfen?

Quelle

2010-09-02 Tim

Mit den neuesten Verbesserungen können Sie Flexbox für diese https://philipwalton.github.io/solved-by-flexbox/ – mixdev

alle von ihnen geben float: left, dann sie gerade breit genug, um in einem Behälter wickelt 2 von ihnen zu passen, so dass die andere zwei werden heruntergedrückt. Zum Beispiel

<div id="container"> 
    <div>Div 1</div> 
    <div>Div 2</div> 
    <div>Div 3</div> 
    <div>Div 4</div> 
</div>

CSS:

#container { 
    width: 600px; 
} 

#container div { 
    float: left; 
    height: 300px; 
    width: 300px; 
}

Edit: Wenn Sie mehr div s innerhalb diejenigen, wollen Sie bereits erhalten, dann können Sie immer die gleiche Technik für die Kinder gelten , wie

<div id="container"> 
    <div> 
    <div>Inner Div 1</div> 
    <div>Inner Div 2</div> 
    <div>Inner Div 3</div> 
    <div>Inner Div 4</div> 
    </div> 
    <div>Div 2</div> 
    <div>Div 3</div> 
    <div>Div 4</div> 
</div>

Dann mit CSS, verwenden Sie dieses Additi onal Stil:

#container div div { 
    float: left; 
    height: 150px; 
    width: 150px; 
}

Quelle

2010-09-02 07:35:07

Wenn ich andere DIVs in meinem DIV1, DIV2, ... verwende, würde das auch funktionieren? z.B.

DIV1

OtherElements

... ?? – Tim

@Tim. Aktualisierte die Antwort - kurz, ja –

ersetzen <div style="width:300px;height:300px;clear:left;"> von Div 3 mit <div style="width:300px;height:300px; clear:both; float:left">

voll html

<div style="width:300px;height:300px;float:left;"> 
    DIV 1 
</div> 

<div style="width:300px;height:300px;float:left;"> 
    DIV 2 
</div> 

<div style="width:300px;height:300px; clear:both; float:left"> 
    DIV 3 
</div> 

<div style="width:300px;height:300px;float:left;"> 
    DIV 4 
</div>

Quelle

2010-09-02 07:33:31 ArK

Danke verwenden. Das war schnell und es funktioniert :-) – Tim

Verwenden Sie immer Container-Div wie von Yi Jiang für das Vermeiden von Zusammenbrüchen mit anderen HTML-Teilen beschrieben. – ArK

Danke, dass du mich an 'clear: both;' erinnert hast! –

Sie können es erreichen dies mit:

<body style="width:600px; height:600px;"> 
<div id="container"> 
    <div style="width:50%; height:50%;float:left;"> 
    DIV 1 
</div> 

    <div style="width:50%; height:50%;float:left;"> 
    DIV 2 
</div> 

    <div style="width:50%; height:50%; float:left;"> 
    DIV 3 
</div> 
    <div style="width:50%; height:50%;float:left;"> 
    DIV 4 
</div> 

</div> 
</body>

Offensichtlich indem Sie sich in einer CSS-Datei, um den Stil Platzierung von Informationen und nicht in der HTML.

Ich würde versuchen, die Breite & Höhe auf eine bestimmte Größe zu setzen, es sei denn Sie einfach nicht vermeiden können. Es verursacht viele Probleme, wenn es in verschiedenen Browsern mit unterschiedlichen Auflösungen angezeigt wird.

Quelle

2010-09-02 07:40:57 codingbadger

"Es verursacht viele Probleme, wenn es auf verschiedenen Browsern mit unterschiedlichen Auflösungen angezeigt wird." Darf ich das kommentieren? Ich denke nicht, dass das jemals der Fall ist, wenn Sie das Reset-Skript nicht vergessen. Außerdem hast du ein 'clear: both' auf dem dritten' div' hinterlassen;) –

@Yi Jiang - oops, danke. Ich habe gerade eine Seite durchsucht, bei der jede Breite und Höhe als "px" eingestellt wurde, was aber nur mit einer bestimmten Auflösung funktionierte. Ich ging durch und änderte dann zu '%' und die Seiten rendern viel besser über verschiedene Auflösungen. Nur etwas, dem ich kürzlich begegnet bin. vielleicht war es eine einmalige und es war nur ein schlechtes Design an erster Stelle. – codingbadger

Es ist wahrscheinlich - Frameworks wie 960gs verwenden lächerlich präzise 'px' Werte, die sich alle perfekt addieren, um dem Raster zu entsprechen, und alles wird in allen Browsern und Auflösungen gut dargestellt –

ausrichten div Elemente nächstes und untereinander

Antwort

Verwandte Themen