0

我一直在尝试在不使用表格的情况下将长列表分成三列。此列表通过在阴影框中弹出来显示。然而，第三个 DIV（右浮动 DIV）在 Chrome 中出现在其他两个下方，但在 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
}

*我已经尝试过没有内联块，位置：相对，并增加了阴影框弹出窗口的大小。*shadowbox 的代码很好，因为它适用于其他页面。

4

3 回答 3

1

100%如果要将所有 DIV 放在一行中，则每个浮动 DIV 都应共享宽度。在这种情况下，您将分配30%给每个 DIV 并padding-left:10px为每个 P 标签添加，因此您的宽度变为

DIV width = 30% + 10px

所以首先检查每个 DIV 的宽度并尝试调整width (%)或尝试减少 padding left 值。如果使用 ，则不需要显示属性值FLOAT。

编辑：还通过使用 CSS 重置类来重置 html 标签，以克服每个 html 标签上不必要的边距和填充。

于 2013-08-21T10:37:41.977 回答
0

填充将总宽度扔掉。您可以使用以下两个技巧解决此问题：

您的一个 div 不需要浮动，因为其他 div 浮动到其他东西的左侧或右侧。不管它是哪个，但尝试让左 div 没有浮动，其他两个浮动：右，并确保右两个 div 的 HTML 在左 div 之前。

为了使尺寸更容易，您可以将一个 div 设置为 width:auto 以便它使用其他 div 留下的可用宽度

于 2013-08-21T11:00:45.757 回答
0

您有百分比的宽度，并在px. 以百分比表示的宽度由浏览器稍后 onload 计算。由于所有浏览器都有不同的视口宽度，这就是结果发生变化的原因。您还应该使用百分比的边距和填充。

于 2013-08-21T10:36:07.440 回答