在CSS中浮动没有正确坐着

Question

我正在尝试使用css设置网格。它是一个包含不同部分的盒子布局，但是我无法正确定位最右边的部分。

div的流程如下：

方框1左   方框2在方框1旁边   方框3在方框2旁边   方框4位于方框2和3下方   方框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的{​​{1}}设置为0。

JsFiddle Demo

#container

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

小提琴：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;
}