css float 4 divs в квадратном порядке (float-left только 2 ° и 4 ° не работает)

У меня 4 divs

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

и мне нужно выровнять их в квадратном порядке: порядок divs

Я попытался поплавать - левый только 2 ° div и 4 ° div, но он не работает.


К сожалению, я не могу использовать
контейнер с определенной шириной, а все divs с левым плаванием

<div id="container" style="width: 250px">
  <div id="first"  style="float: left"></div>
  <div id="second" style="float: left"></div>
  <div id="third"  style="float: left"></div>
  <div id="fourth" style="float: left"></div>
</div>

или положение абсолютное / относительное левое, верхнее и т. д. в моем фактическом проекте ...

Поэтому я надеюсь, что для решения моей проблемы есть какой-то трюк.

css,css-float,

6

Ответов: 5


11 ов
<style>
    .divSquare{
        width:48%; height:200px; margin:4px; border:1px solid black; float: left
    }
</style>    

<div class="divSquare">1</div>
<div class="divSquare">2</div>
<div style='clear:both'></div>
<div class="divSquare">3</div>
<div class="divSquare">4</div>

Я предполагаю, что вы можете определить разницу по высоте, потому что вы не упомянули об этом в своем вопросе. Ширина divSquare определяется 48% (менее 50%), так как поле 4px и 1px (x2) также занимают место.

и это JSFiddle, чтобы увидеть в действии: http://jsfiddle.net/DTp9f/1/


Вы пробовали использовать ясность? Проверьте этот пример:

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

div { height: 100px; float: left; width: 100px; }
#a { background: blue; }
#b { background: red; }
#c { background: green; clear: left; }
#d { background: black; }

http://jsfiddle.net/T5X9A/


1

Работает ли простой ясный поплавок? Этот HTML-код делает то, что вы хотите:

<html>
<style>
    div {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        margin: 8px;
    }
    #third {
        clear: left;
    }
</style>
<body>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
</body>
</html>

1

Я притворяюсь квадратом с height: 0;& padding-bottom: 50%- но кроме того - плавающая часть должна быть ясной. Вот и jsFiddle . Я также не префикс размер окна ... - вы можете это сделать. Удачи!

HTML

<div class="block one">1</div>
<div class="block two">2</div>
<div class="block three">3</div>
<div class="block four">4</div>

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.block {
    width: 50%;
    float: left;
    height: 0;
    padding-bottom: 50%;
}

.one {
    background: yellow;
}

.two {
    background: lightblue;
}

.three {
    background: orange;
}

.four {
    background: red;
}

0

Это действительно основано на ширине четырех div. Контейнер имеет ширину 250 пикселей, поэтому, если первые два divs имеют ширину 125 пикселей, они заполнят первую строку, нажав все оставшиеся divs вниз. Если divs были ширины: 50%, которые будут иметь тот же эффект. Если ширина div была чем-то меньше 33.3333%, то по крайней мере три divs будут накапливаться в первой строке. Поплавок влево позволяет коробкам идти бок о бок, пока не достигнет предела ширины родителя. Что вы можете сделать, так это управлять шириной:

#container > div {
    width: 50%;
}

Или вы можете очистить поплавки каждый третий div.

#container > div:nth-of-type(3n + 3) {
    clear: both;
}

http://jsfiddle.net/3ssKK/1/

CSS, CSS-поплавок,
Похожие вопросы

Warning: fopen(../q/cache/51233876.jkhjkAAAAAAAAAAAA.html): failed to open stream: No such file or directory in /home/a0157998/domains/moredez.ru/public_html/q/index.php on line 138

Warning: fwrite() expects parameter 1 to be resource, boolean given in /home/a0157998/domains/moredez.ru/public_html/q/index.php on line 139

Warning: fclose() expects parameter 1 to be resource, boolean given in /home/a0157998/domains/moredez.ru/public_html/q/index.php on line 140