CSS 2列布局

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

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

这工作，但似乎重复和容易出错的边栏宽度需要与主边距左边的值相匹配。有一个更好的方法吗？

来源

2012-08-03 Jeff Storey

可以使用上#sidebar的float属性：

#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

来源

2012-08-03 15:26:41 JSW189

如果主要内容比侧边栏内容更长并且换行，换行似乎最终会在侧边栏下... – 2012-08-03 15:32:12

@JeffStorey。尝试在'＃sidebar'和'＃main'中添加'display：table-cell'：http://jsfiddle.net/HTqHJ/2/ – JSW189 2012-08-03 15:35:01

这样做，谢谢 – 2012-08-03 15:36:38

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样式。

来源

2012-08-03 15:25:57 Thomas

当我把浮动：留在主，他们都似乎左对齐... – 2012-08-03 15:30:15

哦 - 是的。只是'漂浮：正确';' J4I：也许你应该看看960gs（http://www.960.gs）或BlueprintCSS（http://www.blueprintcss.org）。 – Thomas 2012-08-03 15:32:11

谢谢。它看起来像使用显示：表格单元格由@ JSW189建议，因为我期望 – 2012-08-03 15:38:41

您可以嵌套sidebar内main给人留下main填充和sidebar一个-ve保证金。

#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是工作演示。

来源

2012-08-03 15:39:52

回答

相关问题