0

我正在使用 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解决方案？

4

2 回答 2

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; }
于 2012-05-31T09:53:22.837 回答
1

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

否则你将需要为旧的 IE搞乱display: inline-block和破解zoom: 1

于 2012-05-31T09:54:19.867 回答