對齊不同高度的浮標

我在控制浮標的垂直對齊時遇到了困難。對齊不同高度的浮標

我現在的情況是這樣的： current http://s17.postimage.org/smcbel0pr/current_alignment.jpg

我所需的調整會是這樣： desired http://s13.postimage.org/f1bw4l213/desired_alignment.jpg

。因此aside#headlines垂直對齊方式。當我將HTML中的section#thumbs和aside#headlines替換爲一切看起來不錯時，但這在語義上不正確，尤其是因爲我必須在多個頁面中重複使用此代碼。

來源

2012-04-10 knalpiap

創建側邊欄div並將標題和引號放在那裏可以嗎？ – AlexMA 2012-04-10 21:00:12

問題：保持HTML中元素的順序是必須的嗎？因爲這是很容易做到的，如果你做了像'

我的ISP贏了'讓我訪問postimage，所以我看不到你的照片。在未來，我建議你在JSFiddle.net上創建一個簡化的測試用例 – Phrogz 2012-04-10 21:03:45

將正確的浮線包裹成一個單獨的浮動div，同時保持左浮動分離，解決了我的問題！再次

<aside id="quote" class="float_left"> 
    blabla 
</aside> 

<div class="float_right"> 

    <article id="intro"> 
    blabla 
    </article> 

    <section id="thumbs"> 
    blabla 
    </section> 

</div> 

<aside id="headlines"> 
    blabla 
</aside>

感謝：

最終的結果有點這個樣子！

來源

2012-04-12 06:36:15 knalpiap

你不能用CSS做到這一點。打破浮動是一個普遍的問題，最好的辦法是完全取消浮動，並使用div display: block。但是，如果你真的想使用浮動檢查jQuery Masonry Plugin。

對不起有沒有更好的答案！

來源

2012-04-10 20:53:12 jacktheripper

下載了我的粗略模板謝謝，我不得不深入研究這一點。我以前看過它，但不確定它如何與響應式設計配合使用。 – knalpiap 2012-04-11 06:52:54

-1

你必須將它們包裝在div的列中，然後浮動列。

<div style="float:left"> 
    <div id="quote">blah</div> 
    <div id="headlines">blah</div> 
</div> 
<div style="float:right"> 
    <div id="intro">blah</div> 
    <div id="thumbs">blah</div> 
</div>

[編輯]誤解的問題

來源

2012-04-10 20:56:08 idrumgood

這不會達到理想的佈局... – poncha 2012-04-10 20:57:02

我第二！在這種情況下，不幸的是沒有CSS解決方案 – jacktheripper 2012-04-10 20:57:51

謝謝！ – knalpiap 2012-04-11 06:50:16

我知道它有點因子評分，但是看我如何處理這個...是它可以做到的。

那麼如果我正確理解你，那麼做我所做的事情，首先創建一個包裝所有內容的主包裝。

然後，而不是浮動單獨的項目，如果你願意的話，將你的盒子放在它們自己的列包裝中，然後漂浮它們。因此，例如

（僞代碼來）

<div id="MAINwrapper>//THIS wraps all your content 
<div id="mainLEFTwrapper">//float this left 
    <div one></div> 
    <div two></div> 
</div> 
and THIS wraps your divs that float to the right 
<div id="mainMID/RIGHT wrapper>//float this left or right 
    <div 3></div> 
    <div 4></div> 
</div> 
</div><!-- main wrap ender -->

則CSS是簡單的。現在，由於你的內部列內容/元素現在被包裝在它們各自的左/右內部，所以它們在第一組（上面的市場上作爲左封裝）浮出，並且向右漂浮第二組（右側包裝器）

現在，列封裝，他們落在彼此之下，你可以用邊距或簡單的<br/>標籤分開他們的高度。

然後完成，確保你給MAIN包裝，一個最小寬度總計你的兩個內部列包裝寬度，這樣當屏幕/文檔窗口小於主要包裝時，它們不會在彼此之下浮動寬度（因此漂浮）大聲笑。

這就是它。我試圖對待像這樣的情況，像oldschool桌子哈哈。如果你考慮上面剛剛解釋的那樣，那麼你會更好地理解它。

祝你好運。

如果您需要進一步的幫助，holler，但這100％肯定會工作。

來源

2012-04-11 02:02:23 somdow

感謝您的努力，但這仍然會迫使我改變元素的順序... 我想保持這些語義正確。雖然謝謝！ – knalpiap 2012-04-11 06:49:47

你是什麼意思改變元素的順序？如果你希望你的佈局如上所述，這就是解決方案，本質上是你創建3個新的包裝divs，包裝你當前的元素，如果你想HTML5他們，然後讓他們你父母旁邊等，但沒有任何改變作爲你當前的盒子佈局。加上它沒有任何非語義。 PLUS，因爲它說「動態高度」，那麼這仍然會根據動態購買它進行調整......所以我不明白你爲什麼不使用它。無論如何，無論哪種方式祝你好運 – somdow 2012-04-11 10:56:05

再次感謝您的答覆，但在我的來源中，並非所有左浮動元素被放置在另一個...... 也許另一種解決方案可能是隻包裝右浮游物，所以它將成爲一個單一的對象。 – knalpiap 2012-04-11 12:32:26

對齊不同高度的浮標

回答

相關問題