Поплавки в CSS не подходят должным образом

Question

Я пытаюсь настроить сетку с помощью css. его макет коробки с различными разделами, но я не могу правильно позиционировать правую секцию.

В DIV должен протекать следующим образом:

Box 1 оставил
Box 2 рядом с коробкой 1
Box 3 рядом с коробкой 2
Box 4 сидит под коробки 2 и 3
Box 5 те же размеры, как поле 1, но он плавает справа от ящиков 2 и 3 и 4

Я бы разместил изображение, но он говорит, что у меня недостаточно высокий балл.

CSS:

#container { width:960px; margin:auto; position:relative; height:350px; } 
.box1 { width:240px; height:350px; float:left; } 
.box2 { width:240px; float:left; height:175px; } 
.box3 { width:240px; float:left; height:175px; } 
.box4 { width:480px; float:left; height:175px; } 
.box5 { width:240px; height:350px; float:right; } 

HTML:

<div id="container"> 
<div class="box1"><span>Major Events</span></div> 
<div class="box2"><span>Tours & Maps</span></div> 
<div class="box3"><span>Visiting Information</span></div> 
<div class="box4"><span>Video</span></div> 
<div class="box5">Discovery Centers</div> 
</div> 

Answer 1

Вы можете использовать display:inline-block вместо использования float.

#container { width:960px; margin:auto; position:relative; height:350px; } 
.box1 { width:240px; height:350px; display:inline-block; } 
.box2 { width:240px; height:175px; display:inline-block;} 
.box3 { width:240px; height:175px; display:inline-block; } 
.box4 { width:480px; height:175px; display:inline-block;} 
.box5 { width:240px; height:350px; display:inline-block; } 

Fiddle

Answer 2

Craighead получил половину хороший ответ с display: inline-block;.

Если вы сделаете это, у вас будет небольшой запас. Чтобы удалить его, просто установите font-size в #container 0.

JsFiddle Demo

#container { width:960px; margin:auto; position:relative; height:350px; font-size:0; background: blue;} 
.box1 { width:240px; height:350px; display:inline-block; background : red;} 
.box2 { width:240px; height:175px; display:inline-block;background : orange} 
.box3 { width:240px; height:175px; display:inline-block;background : pink; } 
.box4 { width:480px; height:175px; display:inline-block;background : green;} 
.box5 { width:240px; height:350px; display:inline-block; background : red;} 

Answer 3

Чистейший путь для достижения этой цели заключается в следующем.

В вашем HTML, добавьте div.sub-wrap вокруг .box2, .box3, .box4:

<div id="container"> 
    <div class="box1"><span>Major Events</span></div> 
    <div class="sub-wrap"> 
     <div class="box2"><span>Tours & Maps</span></div> 
     <div class="box3"><span>Visiting Information</span></div> 
     <div class="box4"><span>Video</span></div> 
    </div> 
    <div class="box5">Discovery Centers</div> 
</div> 

Для вашего CSS, поплавок .sub-wrap влево и добавить overflow: auto создать новый блок форматирования контекста, чтобы держать ребенка плавает на одной панели.

#container div { 
    outline: 1px solid gray; 
} 
div.sub-wrap { 
    float: left; 
    overflow: auto; 
    width: 480px; 
} 

См демо по адресу: http://jsfiddle.net/audetwebdesign/SJa5Y/

Результаты выглядят:

Answer 4

Fiddle: http://jsfiddle.net/Bushwazi/U3vkr/

HTML:

<div class="grid"> 
    <div class="grid-left"><span class="box">Major Events</span></div> 
    <div class="grid-center"> 
     <div class="box box50"><span>Tours & Maps</span></div> 
     <div class="box box50"><span>Visiting Information</span></div> 
     <div class="box footer"><span>Video</span></div> 
    </div> 
    <div class="grid-right"><span class="box">Discovery Centers</span></div> 
</div><!-- /.grid --> 

CSS:

.grid { 
    width:960px; 
    margin:auto; 
    height:350px; 
} 
.grid-left, 
.grid-center, 
.grid-right { 
    display: inline-block; 
    float:left; 
    width:25%; 
    height:100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border:solid 1px #d0d0d0; 
} 
.grid-center { 
    width:50%; 
} 
.box { 
    text-align: center; 
    padding:20px; 
    display: block; 
    width:100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.box50 { 
    width:50%; 
    float: left; 
} 
.grid-center .box { 
    height:175px; 
} 
.footer { 
    clear:both; 
    border-top:#ddd solid 1px; 
}