Align Див элементы рядом и друг под другом

я хочу, чтобы выровнять 4 DIV коробки так, что они находятся в макете 2х2, как этотAlign Див элементы рядом и друг под другом

1 2 
3 4

Мой код выглядит как этот

<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>

, который продуцирует следующая схема:

1 2 
3 
4

Может кто-нибудь мне помочь?

источник

2010-09-02 Tim

С последними достижениями вы можете использовать Flexbox для этого https://philipwalton.github.io/solved-by-flexbox/ – mixdev

Дайте все они float: left, затем обернуть их в контейнер только достаточно широким, чтобы соответствовать 2 из них, так что другие два пускаются вниз. Например,

<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: Если вы хотите больше div сек внутри те, которые вы уже получили, то вы всегда можете применить ту же технику для детей , например

<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>

Затем с помощью CSS используйте этот additi нальная стиль:

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

источник

2010-09-02 07:35:07

Если я использую другие DIV внутри DIV1, DIV2, .. это тоже сработает? например

DIV1

OtherElements

... ?? – Tim

@Tim. Обновлен ответ - короче говоря, да –

заменить <div style="width:300px;height:300px;clear:left;"> из Div 3 с <div style="width:300px;height:300px; clear:both; float:left">

полный 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>

источник

2010-09-02 07:33:31 ArK

Спасибо. Это было быстро, и это работает :-) – Tim

всегда использует контейнер div, как описано Yi Jiang, чтобы избежать обрушения с другими частями html. – ArK

Спасибо, вы напомнили мне про 'clear: both;'! –

Вы можете достичь его с помощью этого:

<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>

Очевидно, разместив информацию о стиле, чтобы файл CSS, а не в формате HTML.

Я бы постарался избежать установки ширины & высоты до определенного размера, если вы просто не можете этого избежать. Это вызывает множество проблем при просмотре в разных браузерах при разных разрешениях.

источник

2010-09-02 07:40:57 codingbadger

«Это вызывает множество проблем при просмотре в разных браузерах при разных разрешениях». Ум комментирует это? Я не думаю, что это когда-нибудь, если вы не забудете сценарий сброса. Кроме того, вы оставили 'clear: both' на третьем' div';) –

@Yi Jiang - oops, спасибо. Я только что прошел через сайт, который имел каждую ширину и высоту, установленную как 'px', которая работала, но только при определенном разрешении. Я прошел через и изменил его на '%', и страницы отображались намного лучше в разных разрешениях. Просто то, что я недавно встретил. возможно, это был один, и это был всего лишь плохой дизайн в первую очередь. – codingbadger

Вероятно, это - фреймворки, такие как 960gs, используют смехотворно точные значения 'px', которые все отлично складываются, чтобы соответствовать сетке, и все они отлично отображаются во всех браузерах и разрешениях –

Align Див элементы рядом и друг под другом

ответ

Смежные вопросы