Css定位列

我想要製作一個簡單的css框架，它允許我從側欄內容，側欄邊欄內容等的佈局切換。我面臨的問題是與側欄內容側欄佈局。 HTML代碼看起來像Css定位列

<div class="content"> 
<h2>Content</h2> 
</div> 
<div class="sidebar-alt"> 
<h2>sidebar-alt</h2> 
</div> 
<div class="sidebar"> 
<h2>sidebar</h2> 
</div>

我一直在使用花車嘗試，但似乎無法獲取內容的div是在兩個側邊欄的中心。

使用有點像這樣是CSS能夠實現它

body.sidebar-content-sidebar #container.width-960 .content { 
    width: 460px; 
    position: relative; 
    left: 160px; 
    top: 55px; 
} 
body.sidebar-content-sidebar #container.width-960 .sidebar { 
    width: 300px; 
    margin: 0 0 0 0; 
    position: absolute; 
    top: 55px; 
    left: 639px; 

} 
body.sidebar-content-sidebar #container.width-960 .sidebar-alt { 
    width: 140px; 
    margin: 0 0 0 0; 
    position: absolute; 
    top: 55px; 
}

但是導航是快魚現在不工作。有沒有使用簡單的浮標來定位柱子？或者解決方案是什麼？

來源

2011-02-09 Tristan

你可能要考慮使用margin：auto並且不要在中間部分設置寬度 – Nick 2011-02-09 03:51:52

http://jsfiddle.net/AygDy/適合我...內容在中間的側邊欄 – corroded 2011-02-09 03:53:58

把內容放在html中的「中心」，然後把它們全部留下來。不要擔心設置頂部和左側。

<div class="sidebar-alt"> 
<h2>sidebar-alt</h2> 
</div> 
<div class="content"> 
<h2>Content</h2> 
</div> 
<div class="sidebar"> 
<h2>sidebar</h2> 
</div>

另一種方式是

<div class="left" style="float:left;"> 
<div class="sidebar-alt" style="float:left;"> 
<h2>sidebar-alt</h2> 
</div> 
<div class="content" style="float:right;"> 
<h2>Content</h2> 
</div> 
</div> 
<div class="sidebar" style="float:right;"> 
<h2>sidebar</h2> 
</div>

確保設置寬度。這裏是一個例子http://ewsbuild.com/~johnsplu/

來源

2011-02-09 07:34:39 Ross

這裏有一個良好的開端你正在嘗試做的事：

div.content { 
    width: 460px; 
    position: relative; 
    left: 160px; 
    top: 55px; 
    background-color: red; 
} 
div.sidebar { 
    width: 300px; 
    margin: 0 0 0 0; 
    position: absolute; 
    top: 55px; 
    left: 639px; 
    background-color: green; 
} 
div.sidebar-alt { 
    width: 140px; 
    margin: 0 0 0 0; 
    position: absolute; 
    top: 55px; 
    background-color: blue; 
}

「背景色的只是有形象化的div。（也可以幫助你的利潤）

來源

2011-02-09 03:57:15 Mash

回答

相關問題