HTML/CSS佈局 - 動態寬度

Question

我'在網絡發展論壇很新，我面臨着以下問題：

我有一個父DIV其寬度和高度是未知的，我想這個劃分DIV分爲四個部分如下：

 

    +-------------------------------------------------------------------------+ 
    |+---------------+ +--------------------+ +------------+ +---------------+| 
    ||DIV 1   | |DIV 2    | |DIV 3  | |DIV 4   || 
    ||width: n px | |widht: n px   | |width: 50px | |width: n px || 
    |+---------------+ +--------------------+ +------------+ +---------------+| 
    +-------------------------------------------------------------------------+ 

所以DIV1，DIV2和DIV4需要具有相同的寬度而DIV3具有50像素的靜態寬度。

到現在爲止我已經實現了這個使用一些輔助容器：

所有的

 

    divA = "position:absolute; width:66.6%" 
     divB = "position:absolute;left:0px;right:50px" 
      div1 = "width:50%" 
      div2 = "width:50%" 
     div3 = "position:absolute;right:0px;width:50px" 
    div4 = "width:33.3%;right:0px" 

首先，這個解決方案並不完全地滿足我的需要，因爲DIV1，DIV2和DIV4不具有相同的寬度。 div1/div2的寬度爲（66.6％-50px）/ 2 < 33.3％whe4 div4的寬度恰好爲33.3％

其次，div3的寬度必須在兩個我覺得是有點麻煩。

所以我的問題：

有沒有辦法解決這個用例用純HTML/CSS（不使用表）的方式？

由於提前，

Greez，

哈拉爾

Answer 1

雖然有點舊的瀏覽器不支持，我會建議使用計算（）。您的3格寬度可能等於width:calc(33% - 50px/3)，而50像素寬格仍可以設置爲width:50px。

Answer 2

我想這是你所需要的，而不是來處理寬度的最佳方式，但我想比計算（）

http://jsfiddle.net/HD2ng/

HTML

<div id="container"> 
    <div id="twothird"> 
     <div id="div1">(66%-50px)/2</div><!-- 
    --><div id="div2">(66%-50px)/2</div><!-- 
    --><div id="div3">50px</div> 
    </div><!-- 
--><div id="onethird">33.3%</div> 
</div> 

CSS這包括更多的瀏覽器

#twothird, #onethird, #div1, #div2, #div3{ display:inline-block; height:100px; padding:0; margin:0;} 

#container{ 
    margin:0 auto; 
} 

#twothird{ 
    width:66.6666%; 
    overflow:hidden; 
} 

#div1{ 
    float:left; 
    background:#e5e6e8; 
    overflow:hidden; 
} 

#div2{ 
    float:left; 
    background:#efefef; 
} 

#div3{ 
    width:50px; 
    float:left; 
    background:#e5e6e8; 
} 

#onethird{ 
    width:33.3333%; 
    float:right; 
    background:#efefef; 
} 

JS

$(document).ready(function(){ 
var cw = ($('#twothird').width()-51)/2; 
$("#div1, #div2").width(cw); 
}); 

$(window).resize(function() { 
var cw = ($('#twothird').width()-51)/2; 
$("#div1, #div2").width(cw); 
}); 

Answer 3

我認爲可以通過保證金屬性進行管理。

CSS：

.main{ 
    width: 100%; 
    float: left; 
} 

.div1{ 
width: 33%; 
height: 250px; 
background-color:#aaa; 
float:left; 
margin-right: -20px; 
} 


.div2{ 
width: 33%; 
height: 250px; 
background-color:#bbb; 
float:left; 
margin-right: -20px; 
} 

.div3{ 
width: 50px; 
height: 250px; 
background-color:#ccc; 
float:left; 
} 

.div4{ 
width: 33%; 
height: 250px; 
background-color:#ddd; 
float:left; 
margin-right: -10px; 
} 

HTML：

<div class="main"> 
<div class="div1"><!-- --></div> 
<div class="div2"><!-- --></div> 
<div class="div3"><!-- --></div> 
<div class="div4"><!-- --></div> 
</div>