同時浮動主要內容的右側和左側

我需要添加兩個側邊欄，主要內容的每一側。由於內容不穩定（RSS提要），我寧願在文檔中的主要內容之後加載兩個側邊欄，但仍然需要各自的位置。有沒有辦法做到這一點只是浮動，但沒有相對定位？這是它的樣子至今：https://jsfiddle.net/x5ezys1j/同時浮動主要內容的右側和左側

body { 
 
    width:360px; 
 
} 
 

 
div { 
 
    text-align:center; 
 
    box-shadow: inset 0 0 1px black; 
 
    width:120px; 
 
    height:120px; 
 
} 
 

 
.middle { 
 
    margin:0 120px; 
 
} 
 

 
.left { 
 
    float:left; 
 
} 
 

 
.right { 
 
    float:right; 
 
}

<div class="middle">MAIN</div> 
 
<div class="left">LEFT</div> 
 
<div class="right">RIGHT</div>

來源

2015-05-18 Lucian Davidescu

完成 - 從這裏用大量的靈感 - https://jsfiddle.net/x5ezys1j/3/：http://alistapart.com/article/holygrail

需要負利潤率和可能更多的黑客爲了表現完全符合預期，但沒有絕對的定位。

body { 
    width:120px; 
    margin:0 120px; 
} 

div { 
    float:left; 
    text-align:center; 
    box-shadow: inset 0 0 1px black; 
    width:120px; 
    height:120px; 
} 

.left { 
    margin-left:-200%; 
} 

.right { 
    margin-right:-100%; 
} 

<body> 
    <div class="middle">MAIN</div> 
    <div class="left">LEFT</div> 
    <div class="right">RIGHT</div> 
</body>

來源

2015-05-19 01:48:43

嘗試：

<body> 
    <div class="left">LEFT</div> 
    <div class="right">RIGHT</div> 
    <div class="middle">MAIN</div> 
    </body>

來源

2015-05-18 15:13:25

jsFiddle

順序是有意義的這樣：

<div class="left">LEFT</div> 
<div class="middle">MAIN</div> <!-- should be in the middle --> 
<div class="right">RIGHT</div>

比，簡直所有浮動左：

.left, 
.middle, 
.right{ 
    float: left; 
}

來源

2015-05-18 15:13:36

你需要記住的是，屏幕上會顯示從左至右默認所以需要組織後面的代碼。

所以首先

<div class="left">LEFT</div> 
<div class="middle">MAIN</div> 
<div class="right">RIGHT</div>

然後約在你的CSS的保證金設置離開120像素的餘量，右這推動div的左，右遠留在你的身體設置爲360像素，使他們走在。你需要刪除此行或增加你的身體寬度

來源

2015-05-18 16:28:55 keikoku92

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    width:360px; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    text-align:center; 
 
    box-shadow: inset 0 0 1px black; 
 
    width:120px; 
 
    height:120px; 
 
    
 
} 
 
.left{ 
 
    float: left; 
 
} 
 
.right{ 
 
    float: right; 
 
} 
 
.middle { 
 
    margin: 0 120px; 
 
}

<body>  
 
    <div class="left">LEFT</div>  
 
    <div class="right">RIGHT</div> 
 
    <div class="middle">MAIN</div> 
 
</body>

來源

2015-05-18 18:59:37 Dmitriy

同時浮動主要內容的右側和左側

回答

相關問題