float：左移下一行div div擴展到左側位置

看我的代碼here。您需要調整「結果」面板的大小，以便至少可以查看兩個內嵌塊。如果你點擊「More details」鏈接，它會顯示細節，但它也會移動下一行塊。float：左移下一行div div擴展到左側位置

任何建議，爲什麼這是這樣顯示，雖然我用clear:both。

.reviewimg_blk { 
    border: 1px solid #9B9B9B; 
    float: left; 
    margin-bottom: 15px; 
    margin-right: 15px; 
    margin-top: 15px; 
    padding: 5px 5px 5px 10px; 
    position: relative; 
    width: 395px; 
}

來源

2012-10-29 Prasad

這是浮動的常見問題。如果您不需要IE7支持，請使用display: inline-block; vertical-align: top;而不是float:left;。

請參閱https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/以瞭解跨瀏覽器解決方案。

來源

2012-10-29 06:45:33 user123444555621

謝謝。這是解決方案。 – Prasad

您可以將此標記爲解決方案[通過單擊複選標記]（http://meta.stackexchange.com/a/5235） – user123444555621

這是因爲position:relative。 Position:relative使div或塊保持關係，以便下面的塊向下移動。在與該下拉部分相關的地方使用position:absolute。

來源

2012-10-29 06:11:27

感謝您的回覆，但我使用了相對的方式，因爲我希望他們在當前塊結束後立即執行位置。如果我把它做成絕對的，那麼所有的塊都會顯示在相同的位置（或者我需要指定頂部和左側的位置）。此代碼也在循環中重複。 – Prasad

這是因爲你的第一個itemStyle div有更多的內容，所以它比其他div更高。

因此，在每兩個itemStyle div後面加上<div class="clear"> </div>或者將最小高度固定爲itemStyle格。

我已經在演示中每隔itemStyle個div後添加了clear類。

DEMO

來源

2012-10-29 06:13:45 Sowmya

謝謝，但您是否認爲在兩個塊之後添加清除將限制頁面在一行中僅顯示兩個塊？而且我也不想指定任何硬編碼的高度。 – Prasad

.. Live demo

嗨現在用於Even和odd規則在CSS

.itemStyle:nth-child(odd) { 
clear:left; 
    float:left; 
}

更多信息even or odd規則

來源

2012-10-29 06:35:26

謝謝rohit。這是有效的，但它的限制在頁面上顯示只有兩個塊在單行（如果寬度較低意味着較低的分辨率）在寬分辨率也顯示只有兩個塊在行。 – Prasad

float：左移下一行div div擴展到左側位置

回答

相關問題