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 の境界内で 4 つの要素を引き伸ばして、すべての要素が 150px の同じ幅になるようにすることです。PHP が 6 つの div を生成する場合、それらの幅は 100px にする必要があります。ラッパー内で等間隔に配置したいだけです。

問題全体は、要素の div が php によって生成されるため、要素の div の数が不明であることが原因です。それらのカウントは可変であるため、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をお勧めします - http://jsfiddle.net/Pharaon/ Dg4sz/display: table-cell

それ以外の場合は、古い IE をいじってハックdisplay: inline-blockする必要があります。zoom: 1

于 2012-05-31T09:54:19.867 に答える