0

テーブルを使用せずに、長いリストを 3 つの列にまとめようとしています。このリストは、シャドー ボックスにポップアップ表示されます。ただし、3 番目の DIV (フロート右 DIV) は、Chrome では他の 2 つの下に表示されますが、Safari、FF、または IE では表示されません。これに対する説明/修正はありますか？

例

ここにいくつかのコードがあります：

<div style="float: left; width: 30%; position: relative;display: block;">

<P class="list">Aareon</p>
<P class="list">ABC Systems and Development</p>
...ect
</div>


<div style="float: left; width: 30%; position: relative; display: inline-block;">

<P class="list">EDS</p>
<P class="list">Electoral Office</p>
...ect
</div>

<div style="float: right; width: 30%;  position: relative; display: inline-block;">
<P class="list">Pfizer Adams</p>
<P class="list">Philips Electronics</p>
...ect
</div>

CSS

P.list {margin:5px 0px; line-height:16px;padding-left:10px;text-indent:-7px}
P.list:before {content:url('../images/bullet.png');position:relative;left:-3px
}

*インラインブロック、位置：相対、およびシャドーボックスのポップアップサイズを大きくせずに試しました。*シャドウボックスのコードは、他のページと連携するので問題ありません。

4

3 に答える 3

0

パディングは全体の幅を減らしています。これは、次の 2 つのヒントを使用して修正できます。

div の 1 つはフロートを必要としません。他のものは他の何かの左または右にフロートするからです。どちらでもかまいませんが、フロートなしの左の div と他の 2 つの float:right を使用して、右の 2 つの div の HTML が左の div の前にあることを確認してください。

サイジングを簡単にするために、1 つの div を width:auto に設定して、他の div が残す利用可能な幅を使用することができます

于 2013-08-21T11:00:45.757 に答える