css - 定位頁腳：div-ul-div div內相鄰

我正在嘗試定位頁腳的內容。我的頁腳裏面會有3列。在左邊，我想「聯繫人信息」，在中間的「菜單」，並在右側的「新聞」我的頁腳 HTML結構是這樣的：css - 定位頁腳：div-ul-div div內相鄰

<div id="footercontainer"> 
    <div id="footer"> 

    <div id="footerLeft"></div> 
    <ul id="footerCenter"> </ul> 
    <div id="footerRight"> </div> 

    </div> 
</div>

我的頁腳CSS是這樣的：

#footer{ 
width:1000px; 
margin:auto; 
} 
#footercontainer{ 
width:100%; 
height:auto; 
background:url(../img/prechod_stranka-paticka1920x145.png) no-repeat top center; 
background-color:#4e4b47; 
overflow:hidden; 
} 

#footerLeft{ 
padding-top:80px; 
padding-bottom:20px; 
width:40%; 
padding-left:30px; 
float:left; 
} 

#footerCenter{width:10%;float:left;padding-top:80px; display:block;} 

#footerRight{padding-top:80px; width:10%; display:block; }

此刻footerLeft和footerCenter彼此相鄰，但footerRight放置在footerLeft下面。任何人都可以幫助我，如何把他們放在彼此旁邊？

來源

2013-11-23 user2886091

這是3欄佈局

http://jsfiddle.net/cancerian73/8Lqr6/

*, *:before, *:after { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 
.common-div { 
width:33.33%; 
min-height:200px; 
float:left; 
} 
.left { 
background-color:#CCC 
} 
.right { 
background-color:#930 
} 
.center { 
background-color:#9C6 
}

基本標記這是你在找什麼？

來源

2013-11-23 17:22:33 San

嘗試更改display:block到display:inline-block爲footerRight div。

#footerRight{ padding-top:80px; width:10%; display:inline-block; }

來源

2013-11-23 17:27:04

http://jsfiddle.net/3SDCT/

添加float:left您#footerRight，如果你想你的右尾輕推到中心或您可以float:right如果你希望它是碰一碰你#footerContainer的右邊緣。

我把一個紅色的邊框，所以你可以看到你的div。另外我把你無序列表包裝在一個div中。

希望這會有所幫助

來源

2013-11-23 18:08:10 CamSyl

css - 定位頁腳：div-ul-div div內相鄰

回答

相關問題