爲什麼浮動div的頂部不與父div對齊？

我試圖創建一個頁面的一個部分，其中兩個文本div彼此對齊，但一個漂浮在另一個的右側。無論我嘗試什麼，浮動div似乎在開始之前留下一行空白文本。爲什麼浮動div的頂部不與父div對齊？

下面是它看起來像在Chrome（和Safari）：

enter image description here

我和保證金，填充垂直對齊出場，但是沒有一樣能得到擺脫兩者之間的空白。

CSS是：

body { 
    font-family: sans-serif; 
    font-size: 13px; 
} 
div.sidebar { 
    width: 300px; 
    float: right; 
    background: pink; 
} 
div.maincolumn { 
    background: #aaffaa; 
} 
div.clear { 
    clear: right; 
}

HTML是：

<div class="maincolumn"> 
    <div class="sidebar"> 
    <h3>Constitution</h3> 
    We the People of the United States, in Order to form a more perfect 
    Union, establish Justice, insure domestic Tranquility, provide for 
    the common defence, promote the general Welfare, and secure the 
    Blessings of Liberty to ourselves and our Posterity, do ordain and 
    establish this Constitution for the United States of America. 
    </div> 
    <h3>Declaration</h3> 
    When in the Course of human events, it becomes necessary for one 
    people to dissolve the political bands which have connected them with 
    another, and to assume among the powers of the earth, the separate and 
    equal station to which the Laws of Nature and of Nature's God entitle 
    them, a decent respect to the opinions of mankind requires that they 
    should declare the causes which impel them to the separation. 
    <p/> 
    We hold these truths to be self-evident, that all men are created 
    equal, that they are endowed by their Creator with certain unalienable 
    Rights, that among these are Life, Liberty and the pursuit of 
    Happiness.--That to secure these rights, Governments are instituted 
    among Men, deriving their just powers from the consent of the 
    governed, --That whenever any Form of Government becomes destructive 
    of these ends, it is the Right of the People to alter or to abolish 
    it, and to institute new Government, laying its foundation on such 
    principles and organizing its powers in such form, as to them shall 
    seem most likely to effect their Safety and Happiness. 
</div> 
<div class="clear"> 
    Edward by the grace of God King of England, lord of Ireland and 
    duke of Aquitaine sends greetings to all to whom the present 
    letters come. We have inspected the great charter of the lord 
    Henry, late King of England, our father, concerning the liberties 
    of England in these words: 
</div>

有一些CSS魔法，將拉起的浮動DIV的文本？

來源

2013-06-19 ShouldKnowThisAlready

我真的不明白你的意思 - 你希望它是什麼樣子，你能具體談談？ – vijrox

我希望「宣言」和「憲法」等字對齊，理想情況下在包含彩色框的頂部。這更清楚嗎？ – ShouldKnowThisAlready

明白了。我剛剛發佈了一個答案 – vijrox

是的。添加overflow:auto到div.maincolumn

div.maincolumn { 
    background: #aaffaa; 
    overflow:auto; 
}

jsFiddle example

您的特定佈局的block formatting context一個例子，如何overflow:auto可以恢復你所尋求的行爲。

來源

2013-06-19 02:50:23 j08691

謝謝。這是有效的，但它通過按下左側（非浮動）文本而不是提高右側（浮動）文本來實現。但是我想了解塊格式上下文。 – ShouldKnowThisAlready

@ShouldKnowThisAlready展開你的jsfiddle的視圖。它全部按照你的意願工作。再試一次。 – bot

你看到的是一個h3元素的正常餘量。如果你通過CSS刪除它，你可以得到我想要的：http://jsfiddle.net/j08691/7MpYj/4/ – j08691

添加到您的CSS：

div.sidebar h3 { 
    margin-top:0; 
}

這裏是一個小提琴：http://jsfiddle.net/7MpYj/3/

來源

2013-06-19 03:12:45 vijrox

Doh！謝謝 - 我沒有想到問題是h3，而不是浮動。現在我明白@ j08691的答案，其中塊格式上下文意味着主列和浮動列都顯示了h3的餘量。 – ShouldKnowThisAlready

爲什麼浮動div的頂部不與父div對齊？

回答

相關問題