浮動右邊的DIV出現在下面的其他人出現在shadowbox Chrome下面

我一直在試圖將長列表變成三列而不使用表格。此列表通過彈出一個陰影框顯示。然而，第三個DIV（浮動右邊的DIV）出現在Chrome的另外兩個下方，但不是在Safari，FF或IE中。有沒有解釋/解決這個問題？浮動右邊的DIV出現在下面的其他人出現在shadowbox Chrome下面

Example

下面是一些代碼：

<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的代碼很好，因爲它可以與其他頁面一起使用。

來源

2013-08-21 George

如果要將所有DIV放在一行中，則每個浮動DIV應共享寬度100%。在這種情況下，你要分配30%每個DIV和每個P標籤添加padding-left:10px，讓您的寬度變

DIV width = 30% + 10px

所以首先檢查每個DIV的寬度，並嘗試調整width (%)或儘量減少填充左值。如果您使用FLOAT，則不需要顯示屬性值。

編輯：通過使用CSS重置類來克服不必要的邊距和填充每個html標記也重置html標記。

來源

2013-08-21 10:37:41

我知道這將是類似的東西，這就是爲什麼它是在30 ％不是33％，當我下降到28％時，它一切正常，CSS重置是一個很好的電話，我會嘗試一下。乾杯 – George

你有百分比的寬度，有填充和邊距px。以百分比表示的寬度由稍後加載的瀏覽器計算。由於所有瀏覽器具有不同的視口寬度，這就是結果發生變化的原因。您還應該使用百分比的邊距和填充。

來源

2013-08-21 10:36:07

填充將拋出總寬度。你可以使用以下兩個技巧來解決這個問題：

你的一個div不需要float，因爲其他的float漂浮在其他東西的左邊或右邊。不管它是什麼，但是試着讓左邊的div沒有浮動，另外兩個浮動：右邊，並確保右邊兩個div的HTML在左邊div之前。

爲了使上漿容易，你可以有一個DIV設置爲width：auto，以便它使用現有的寬度，其他的div留下

來源

2013-08-21 11:00:45 guymid

浮動右邊的DIV出現在下面的其他人出現在shadowbox Chrome下面

回答

相關問題