PHP生成的內容divs自動擴展以適應包裝div寬度

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類列表（跨瀏覽器需要）？

例如：

$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

如果您可以支持Internet Explorer只有8或更高版本（當然包括Firefox，Chrome和Safari）我建議使用display: table和display: table-cell就像我在這個小提琴中所示 - http： //jsfiddle.net/Pharaon/Dg4sz/

否則你將需要搞亂display: inline-block和zoom: 1舊IE的zoom: 1黑客