创建CSS列

-2

可能重复：
Creating two columns layout - html/css semantics 创建CSS列

我有一个跨越整个浏览器，并使用下面的代码里面是中心内部的div一个div：

.wrapper {width: 1024px; margin: 0 auto; clear: both;}

如何在包装中创建两列？

来源

2012-11-16 BrianJamesKeith

需要注意的是'宽度：1024px' = “整个浏览器”。在大多数笔记本电脑上，一旦出现垂直滚动条，这将产生水平滚动条。在较大的屏幕上，这将在页面周围创建垂直条纹。使用固定的布局，任何事情都很容易，绝对的布局，甚至没有它。 –

谢谢你的评论凯文。 – BrianJamesKeith

我其实想创建一个与你的网站Kevin非常相似的东西。哪里有跨越整个浏览器和乐队内的内容中心的颜色带。 – BrianJamesKeith

使用漂浮物（并清除它们）或使用display:inline-blocks。

在这里，我让你成为colorful example。

HTML

<div class="wrapper"> 
    <div id="col1">a</div> 
    <div id="col2">b</div>  
    <br style="clear:both" /> 
</div> 

<hr /> 

<div class="wrapper"> 
    <div class="col">a</div> 
    <div class="col">b</div> 
</div>

CSS

body {background:blue;} 
.wrapper {width: 80%; margin:0px auto; background:red;height:300px;} 

#col1 {width:50%;float:left;background:green; height:200px;} 
#col2 {width:50%;float:right;height:200px;background:lightblue;} 

.col {display:inline-block; width:49%;height:200px;background:pink;}

来源

2012-11-16 21:52:57 Kraz

哇 - 非常感谢！我非常感谢帮助。 – BrianJamesKeith

回答

相关问题