css - 如何相对于父容器的可用宽度以相等的宽度水平居中元素

Question

我有一个容器 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>

在此示例中，“pre-footer”div 是主容器，其宽度在 css 中定义为 900 像素。由于有 3 个子 div(单个小部件文本)，我希望每个都占据大约 300 像素的宽度。

Answer 1

小部件宽度应该是一个百分比，但就像您在回应 stealthyninja 的回答时所说的那样，您事先不知道是哪个百分比。 CSS 无法为您计算宽度，因此您必须使用其他方法来计算宽度。最明显的方法似乎是让一段 javascript (JQuery) 在小部件数量发生变化时立即调整 css 值。像这样:

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

或者，您可以在 asp.net 或 php 中的回发中执行此操作，并为小部件提供内联样式:

width:xxxx%;