2013-07-24 126 views
1

我'在網絡發展論壇很新,我面臨着以下問題:HTML/CSS佈局 - 動態寬度

我有一個父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,

哈拉爾

+0

只是給他們寬度在% – Hushme

+0

表是HTML的一部分。 – AnaMaria

+0

你可以粘貼你的HTML。事情會更簡單 – AnaMaria

回答

2

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

0

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

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

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

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>