全宽网页

Question

我试图用3段一起网页：

1. div的宽度：200像素
2. DIV乙全宽
3. DIVÇ宽度：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乙不是全屏如何解决这个！？

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> 

作为下一步，你将不得不从.b除去float: left;（使元件漂浮去除抓取可用宽度的典型块级元素的行为），并更改浮动为.c右边。

最后一步然后将不得不将所有3的宽度分配给他们的容器.main。

Answer 2

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

Answer 3

我想你需要一些CSS引导程序等，或使用媒体查询。

对于修复宽的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; 
}