PHP 生成的内容 div 自动扩展以适应包装器 div 的宽度答案

【问题标题】：PHP generated content divs auto expand to fit wrapper div widthPHP 生成的内容 div 自动扩展以适应包装器 div 的宽度
【发布时间】：2014-05-12 13:20:59
【问题描述】：

我正在使用 PHP 生成包含文本的 div，这些文本适合固定宽度的包装 div

生成的 HTML

<div id="wrapper">
  <!-- PHP generated divs -->
  <div class="element">Home</div>
  <div class="element">Items</div>
  <div class="element">About</div>
  <div class="element">FAQ</div>
</div>

CSS：

#wrapper {
  width: 600px;
  height: 100px;
  display: block;
}

.element {
  height: inherited;
}

我想要完成的是让四个元素在包装 div 的边界内拉伸，这样它们都具有 150 像素的相等宽度。如果 PHP 生成 6 个 div，那么它们的宽度应该是 100px。我只是希望它们在包装内均匀分布。

整个问题源于未知数量的元素 div，因为它们是通过 php 生成的。它们的计数是可变的，所以我无法在 css 中预测这一点，这就是为什么我不能在元素 div 上放置固定宽度。

是否有任何 CSS 解决方案？

【问题讨论】：

标签： php html css

【解决方案1】：

如果您使用 PHP 生成它，为什么不简单地为它们添加一个带有元素数量的特定类，并保留一个具有不同宽度的 CSS 类列表（跨浏览器需要）？

例如：

$menu = array('Home', 'Items', 'About', 'FAQ');
$count = count($menu);
foreach($menu as $item) {
    echo '<div class="element_'.$count.'">'.$item.'</div>';
}

CSS

.element_4 { width: 150px; }
.element_6 { width: 100px; }

【讨论】：

Thnaks，这是一个很好的解决方法，尽管这意味着如果我将包装元素的固定宽度更改为 800，它将不再起作用，因为我必须重新设置包含 element_* 的整个 css类。
作为解决此问题的方法，您可以使用百分比将固定宽度更改为宽度。虽然这可能很难用一些数字来计算。

【解决方案2】：

如果您可以仅支持 Internet Explorer 8 或更高版本（当然包括 Firefox、Chrome 和 Safari），我建议您使用 display: table 和 display: table-cell，就像我在这个小提琴中展示的那样 - @ 987654321@

否则，您将需要处理旧 IE 的 display: inline-block 和 zoom: 1 hacks

【讨论】：

谢谢，我认为可能有类似于 table 的东西，但我已经有一段时间没有玩 CSS 了。这完全符合我的要求！对于 8 之前的版本，我有一张单独的表格，所以我不介意它不适用于这些版本。