Question

我正在尝试创建一个简单的css框架，它允许我从侧边栏内容，侧边栏侧边栏内容等布局切换。我面临的问题是侧边栏内容侧边栏布局。 html代码看起来像

<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;
}

然而，现在超级鱼的导航不起作用。无论如何使用简单的浮子定位柱子？或者解决方案是什么？

Answer 1

这是你要做的事情的良好开端：

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。（也可以帮助你利润）

Answer 2

将内容放在html中的“center”中，然后将它们全部向左浮动。不要担心设置顶部和左侧。

<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/

的示例

Css定位列

2 个答案: