2浮動列推腳

我的網頁有點問題。我有2列左右浮動。右列有多個包含內容的h1和p標籤。2浮動列推腳

<div id="wrapper"> 
     <div id="left">...</div> 
     <div id="right"> 
      <h1>...</h1> 
      <p>...</p> 
     </div> 
    <div style="clear: both;"></div> 
    <div id="footer">...</div> 
</div>

沒有左欄中的內容，右列將頁腳向下推並更改包裝紙高度。但是我的左列有問題。當其中有更多的內容（高度大於右欄）向下推腳時，左欄內容顯示在頁腳頂部並改變整個身體的高度而不是改變包裝的高度。

#wrapper { 
    width: 980px;} 
    #left { 
      float: left; 
      width: 750px; 
      position: absolute;} 
    #right { 
    float: right; 
    width: 300px;}

沒有絕對位置的左div和右div在左邊下推。

來源

2014-11-06 Jakub M

我覺得這可能有助於...

#wrapper { 
    width: 1050px; <---- 
} 
#left { 
    float: left; 
    width: 750px; 
} 
#right { 
    float: right; 
    width: 300px; 
}

你的包裝體寬度必須等於或大於左，右相結合。

而且你可能會注意到您h1和p標籤引起邊距的一點 - 不知道你的意思是這樣，但你可以通過做

h1,p { 
    margin: 0; 
}

解決這個問題，或只是把它應用到整個身體。

body { 
    margin: 0; 
}

來源

2014-11-06 15:17:22 Patosai

我現在感覺有點傻。我創建了一個完全新的設計，現在它可以工作，不需要對左側div進行絕對定位。 – 2014-11-06 19:49:37

Patosai的答案是正確的，我不確定你的代碼是什麼用例。

但要確保<div id="left">和<div id="right">彼此下不會合攏，你可以嘗試使用百分比：

#wrapper { 
    width: 100%; 
} 
#left { 
    float: left; 
    width: 75%; 
} 
#right { 
    float: right; 
    width: 25%; 
}

看到這裏工作的例子：http://codepen.io/yoomee/pen/KuzHB

來源

2014-11-06 15:54:52

2浮動列推腳

回答

相關問題