浮动右侧DIV显示在其他下方仅在影子框Chrome中显示

Question

我一直试图在不使用表的情况下将长列表分成三列。通过在阴影框中弹出来显示此列表。然而，第三个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
}

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

Answer 1

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

DIV width = 30% + 10px

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

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

Answer 2

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

Answer 3

填充正在抛出总宽度。您可以使用以下两个提示来解决此问题：

你的一个div不需要浮动，因为其他的浮动到其他东西的左边或右边。它是什么并不重要，但尝试只有没有浮动的左div和另外两个浮动：右，并确保右两个div的HTML在左div之前。

为了使大小更容易，你可以将一个div设置为width：auto，以便它使用其他div留下的可用宽度