2列div布局：右列有固定寬度，左側(cè)流體我的要求很簡單：2列，右列有固定大小。不幸的是，我無法在stackoverflow和Google上找到有效的解決方案。如果我在自己的上下文中實(shí)現(xiàn)，那么每個解決方案都會失敗 目前的解決方案是：div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;}#content {
margin-right: 265px;}#right {
float: right;
width: 225px;
margin-left: -225px;}#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;}<div class="container">
<div id="content">
fooburg content </div>
<div id="right">
test right </div></div>我用上面的代碼得到以下內(nèi)容：|----------------------- -------|| fooburg content | ||-------------------------------|| | test right | |----------------------- -------|請指教。非常感謝！
3 回答
拉風(fēng)的咖菲貓
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個贊
刪除左列上的浮動。
在HTML代碼中，右列需要在左側(cè)列之前。
如果右邊有一個浮點(diǎn)數(shù)（和一個寬度），如果左邊的列沒有寬度而且沒有浮動，那么它將是靈活的:)
同時將一個overflow: hidden高度（可以是自動）應(yīng)用于外部div，以便它包圍兩個內(nèi)部div。
最后，在左欄中添加一個width: auto和overflow: hidden，這使得左列獨(dú)立于右側(cè)（例如，如果您調(diào)整了瀏覽器窗口的大小，右側(cè)列觸及左側(cè)列，沒有這些屬性，則左列將運(yùn)行圍繞右邊的一個，這個屬性保留在它的空間中）。
示例HTML：
<div class="container"> <div class="right"> right content fixed width </div> <div class="left"> left content flexible width </div></div>
CSS：
.container {
height: auto;
overflow: hidden;}.right {
width: 180px;
float: right;
background: #aafed6;}.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;}示例：http：//jsfiddle.net/jackJoe/fxWg7/
ibeautiful
TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個贊
最好避免在左前方放置右列，只需使用負(fù)右邊距。
并通過包含@media設(shè)置來“響應(yīng)”，因此右側(cè)列在窄屏幕上位于左側(cè)。
<div style="background: #f1f2ea;"> <div id="container"> <div id="content"> <strong>Column 1 - content</strong> </div> </div> <div id="sidebar"> <strong>Column 2 - sidebar</strong> </div><div style="clear:both"></div>
<style type="text/css">#container {
margin-right: -300px;
float:left;
width:100%;}#content {
margin-right: 320px; /* 20px added for center margin */}#sidebar {
width:300px;
float:left}@media (max-width: 480px) {
#container {
margin-right:0px;
margin-bottom:20px;
}
#content {
margin-right:0px;
width:100%;
}
#sidebar {
clear:left;
}}</style>添加回答
舉報
0/150
提交
取消