Css 定位列

Question

我正在尝试制作一个简单的 css 框架，它允许我从 sidebar-content、sidebar-sidebar-content 等布局切换。我面临的问题是 sidebar-content-sidebar 布局。html代码看起来像

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

我试过使用 float 但似乎无法让内容 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;
}

但是 superfish 的导航现在不起作用。无论如何使用简单的 float 定位列？或者有什么解决办法？

Answer 1

将内容放在 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/