Question

我正在使用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的边界内伸展，这样它们都具有150px的相等宽度。如果PHP生成6个div，那么它们的宽度应该是100px。我只是希望它们在包装器中均匀分布。

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

这有什么CSS解决方案吗？

Answer 1

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

E.g：

$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; }

Answer 2

如果您可以支持仅限8及更高版本的Internet Explorer（当然包括Firefox，Chrome和Safari），我建议使用display: table和display: table-cell，就像我在这个小提琴 - http://jsfiddle.net/Pharaon/Dg4sz/

否则你将需要弄乱旧版IE的display: inline-block和zoom: 1黑客

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

2 个答案: