Оператор CSS Float

.float1  {
float: left;
width: 50%;
height: 50%;
}
.float2  {
float: right;
width: 50%;
height: 50%;
}
.float3  {
float: left;
width: 50%;
height: 50%;
}
.float4  {
float: right;
width: 50%;
height: 50%;
}
.clear {
clear: both;
}


HTML:


<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="clear"></div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>
<div class="clear"></div>


Мне нужен результат, подобный этому изображению:
alt text


Пожалуйста, исправьте мой код CSS. Спасибо.


css css-float
person Jorge    schedule 30.04.2010    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Вам нужно очистить только третий элемент, поэтому нет необходимости в каких-либо четких элементах. Переместите все элементы влево, чтобы расположить их рядом друг с другом, вместо некоторых слева и справа:

.float1, .float2, .float3, .float4 { float: left; width: 50%; height: 50%; }
.float3 { clear: both; }

HTML:

<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>
person Guffa    schedule 30.04.2010
comment
если float3 очищен на обоих, как float4 будет рядом с ним? - person Matt Ellen; 30.04.2010
comment
@Matt: clear влияет на предыдущие элементы, а не на последующие. - person Samir Talwar; 30.04.2010
comment
Мне нравится отредактированный CSS, в отличие от того, о котором говорилось выше. но опять же я часто скептически отношусь к использованию% высоты или ширины. - person phoenix24; 30.04.2010
comment
@ phoenix24: Да, использование таких процентов может вызвать проблемы с округлением, например 50% от 201 пикселя необходимо округлить до 100 или 101, поэтому будет на один пиксель слишком мало или на один слишком много, когда у вас есть два элемента рядом друг с другом. - person Guffa; 01.05.2010

arrow_upward
0
arrow_downward

Если вы можете использовать CSS3, вы можете использовать селектор, чтобы добиться этого без тонны кода:

CSS:

div.boxContainer>div{
    float: left;
    width: 50%;
    height: 50%;
}

div.boxContainer div:nth-of-type(3){
    clear:both;
}

HTML:

<div class="boxContainer">
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">1</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">2</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">3</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">4</div>
</div>
person BraedenP    schedule 30.04.2010

arrow_upward
0
arrow_downward

Немного изменив @guffa, вот фрагмент кода для достижения желаемого результата.

Добавлены поплавки Div с центром по горизонтали и вертикальным выравниванием.

html,body {
    height:100%;
}
.float1, .float2, .float3, .float4 {  padding: 12.5% 0;   text-align: center; box-sizing:border-box; border: 1px solid red; float: left; width: 50%; height: 50%; line-height: 1;}
.float3 { clear: both; }
<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>

person anil funde    schedule 29.10.2018