Question

我有一个基本的两列CSS布局，CSS看起来像

#sidebar {
    width:100px;
}
#main {
    margin-left:100px;
}

还有一些示例html

<div id="content">
  <div id="sidebar">some sidebar content</div>
  <div id="main">some main content</div>
</div>

这样可行，但看起来重复且容易出错，侧边栏宽度需要与主要的边距左侧值相匹配。有更好的方法吗？

Answer 1

您可以使用float上的#sidebar媒体资源：

#sidebar {
    width:100px;
    float: left;
}

JS Fiddle Example

但是，使用上述方法，如果#main的内容导致其高度延伸到#sidebar以下，it will wrap under the sidebar。要避免这种情况，请使用display:table-cell属性：

#sidebar, #main {
    display: table-cell;
}

JS Fiddle Example

Answer 2

<强> CSS

#sidebar { width:100px; float: left; }
#main { float: right; }

<强> HTML

<div id="content">
    <div id="sidebar">my stuff</div>
    <div id="main">some main content</div>
    <div style="clear:both;"></div>
</div>

我建议使用960.gs或BlueprintCSS进行基本的html / css样式设计。

Answer 3

您可以sidebar在main内嵌入main左侧填充，sidebar -ve margin。

#content{
    width: 100%;
}
#sidebar, #main{
    float: left;
    display: block;
}
#sidebar{
    width: 100px;
    background-color: orange;
    margin-left: -100px;
}
#main{
    padding-left: 100px;
    background-color: green;
    width: 100%;
}

<div id="content">
    <div id="main">
        <div id="sidebar">some sidebar content</div>some main content
    </div>
</div>

Here 是工作演示。

css 2列布局

3 个答案: