html - 全宽网页

Question

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

1. div A 宽度:200px
2. div B 全宽
3. div C width: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 (使元素 float 消除了获取可用宽度的典型 block 级元素行为)并更改 .c 的 float 向右。

最后一步必须是您必须将所有 3 个所需的宽度分配给它们的容器 .main .