全宽网页

Question

我正在尝试一个包含3个部分的网页：

1. div A宽度：200px
2. div B全宽
3. div C宽度：10px;

HTML：

<div class="main">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>

CSS：

.main{
    min-width: 1200px;
    height: 100%;
    width: 100%;
    background-color:#F00;
}

.a{
    width:200px;
    height:500px;
    background-color:#0F0;
    float:left;
}

.b{
    height:500px;
    background-color:#00F;
    float:left;
}

.c{
    width:10px;
    height:500px;
    background-color:#FF0;
    float:left;
}

但是div B不是全屏！如何纠正这个？

Answer 1

您需要重新排序<div>。先是<div class="a">，然后是<div class="c">，然后是<div class="b">：

<div class="main">
    <div class="a">A</div>
    <div class="c">C</div>
    <div class="b">B</div>
</div>

下一步，您必须从float: left;中删除.b（使浮动元素移除抓取可用宽度的典型块级元素行为）并更改{{1的浮点数向右。

最后一步必须是你必须将所有3的宽度分配给他们的容器.c。

Answer 2

.b
{
 background-color:#00F;
 float:left;
 height:500px;
 min-width: 990px; /* 1200 -200-10*/
}

Answer 3

我认为你需要一些css lib，比如bootstrap等，或者使用媒体查询。

对于修复范围，css看起来像

.main{
    min-width: 1200px;
    height: 100%;
    width: 100%;
    background-color:green;
}

.a{
    width:200px;
    height:500px;
    background-color:#0F0;
    display:inline-block;
    float:left;
}

.b{
    height:500px;
    background-color:#0F0;
    display:inline-block;
    width:990px;
}

.c{
    width:10px;
    height:500px;
    background-color:#FF0;
    display:inline-block;
    float:right;
}