全寬網頁

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; 
}