it-swarm.com.ru

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

У меня есть 4 деления

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

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

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


К несчастью Я не могу использовать
контейнер с определенной шириной и всеми делениями влево

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

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

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

7
user3746998
<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's установлена ​​на 48% (менее 50%), потому что поле 4px и граница 1px также занимают место.

JSFiddle чтобы увидеть это в действии.

12
Moshtaf

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

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

7
Jaime Gómez

Я подделываю квадрат с помощью 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;
}
2
sheriffderek

Работает ли простой clear float? Этот 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
Jason Winnebeck

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

#container > div {
    width: 50%;
}

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

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

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

0
jerrylow