如何以相等寬度相對於父容器的可用寬度水平放置項目

我有一個容納任意數量的小部件的容器div。我想讓每個小部件的寬度自動調整，以便每個小部件在容器div內佔用相同數量的水平空間。與使用單元格的傳統表格的工作方式非常相似。如何以相等寬度相對於父容器的可用寬度水平放置項目

如果我是數學表達出來，該公式將是...

widget-width = container-width/number-of-containers)

我標記低於

<div class="pre-footer"> 
    <div class="single widget_text"> 
     <h4>Widget Heading</h4>   
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
    <div class="single widget_text"> 
     <h4>Widget Heading</h4>   
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
    <div class="single widget_text"> 
     <h4>Widget Heading</h4>   
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
</div>

在這個例子中，「預頁腳」 DIV是主容器及其寬度在css中定義爲900像素。由於有3個子div（單個部件 - 文本），我希望每個都佔用約300個像素的寬度。

來源

2010-12-19 Scott B

小部件寬度應該是一個百分比，但像您在響應stealthyninja的回答說，你事先不知道哪個％。 CSS不能爲你計算寬度，所以你必須用別的方法來做。最明顯的方法似乎是，只要小部件數量發生變化，您就可以讓一段JavaScript（JQuery）調整css值。是這樣的：

var numberOfWidgets = X; 
var widgetWidth = Math.floor(100/numberOfWidgets); 
$("div.single").css({"width": widgetWidth + "%"});

或者，你可以在回發asp.net或PHP這樣做，並給小部件的內嵌樣式：

width:xxxx%;

來源

2010-12-20 08:40:40 Bazzz

謝謝Bazzz。這可能是最好的解決方案。我知道CSS不能進行數值計算（至少有一個不受瀏覽器內部控制）。我希望有一個CSS屬性或組合，我錯過了可以根據父容器的可用寬度將容器的子元素分配給相同的寬度。 – 2010-12-20 16:56:31

不幸的是，你可以設置一個元素的寬度相對於它的父寬度，但不是相對於它的兄弟姐妹的寬度，或它的兄弟姐妹的數量。也許在CSS3中這將實施，手指交叉。 :) – Bazzz 2010-12-22 10:17:57

最佳答案，直到css3我想。感謝Bazzz :) – 2010-12-22 18:29:30

@Scott B：你可以做這樣的事情 -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title></title> 

<style type="text/css"> 
.pre-footer { 
    background-color: grey; 
    overflow: hidden; 
    width: 900px; 
} 
.single { 
    float: left; 
    width: 33%; 
} 
</style> 
</head> 

<body> 

<div class="pre-footer"> 
    <div class="single widget_text" style="background-color: red"> 
     <h4>Widget Heading 1</h4> 
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
    <div class="single widget_text" style="background-color: yellow"> 
     <h4>Widget Heading 2</h4> 
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
    <div class="single widget_text" style="background-color: blue"> 
     <h4>Widget Heading 3</h4>  
     <div class="textwidget">Widget text goes here.</div> 
    </div> 
</div> 

</body> 
</html>

的jsfiddle鏈接：http://jsfiddle.net/Maats/

來源

2010-12-19 22:23:04 stealthyninja

感謝輸入，和你的33％的建議如果有3個div，寬度工作。但是，子div的數量完全取決於最終用戶。我的例子有3，但他們可以有1,2,3,4等... – 2010-12-20 01:24:24

如何以相等寬度相對於父容器的可用寬度水平放置項目

回答

相關問題