Question

http://jsfiddle.net/9877/6E2pQ/2/ 我想要做的是左边有columncontent1，右边有columncontent2和columncontent3。看到jsfiddle。我该如何修复css？我的想法已经不多了。是css中的错误还是div放在正文中的方式：

<style type="text/css">
/*<![CDATA[*/
.columncontainer1{
width:1001px;
position:relative;
border:0px;
background-color:#fffffa;
overflow:hidden;
 }
.columncontainer2{
float:left;
position:relative;
right:300px;
border-right:1px solid #0a0a0a;
background-color:#f5f5f5;
 }
 .columncontainer3{
float:left;
position:relative;
bottom: 10px
border-right:1px solid #0a0a0a;
background-color:#f5f5f5;
}
.columncontent1{
float:left;
width:680px;
position:relative;
background-color:#933;
border: 1px;
left:300px;
padding:10px;
overflow:hidden;
 }
.columncontent2{
float:left;
width:280px;
position:relative;
background-color:#FFF;
border: 2px;
left:301px;
padding:10px;
overflow:hidden;
 }
 .columncontent3{
float:left;
width:280px;
position:relative;
left:301px;
border: 4px;
background-color:#CC6;
padding:10px;
overflow:hidden;
 } 
 /*]]>*/
 </style>

Answer 1

那里有很多事情，我简化了HTML和CSS：

CSS：

.leftCol {
float: left;
width: 50%;
background-color: #ccc;
height: 60px;
}
.rightColContainer {
float: left;
width: 50%;
}
.rightCol1 {
background-color: #333;
height: 30px;
}
.rightCol2 {
background-color: #777;
height: 30px;
}

HTML：

<body>
    <div class="leftCol">columncontent1</div>
    <div class="rightColContainer">
        <div class="rightCol1">columncontent2</div>
        <div class="rightCol2">columncontent3</div>
    </div>
</body>

您只需要“包含”右侧列以阻止“堆叠列”错误地流动。

Answer 2

CSS3实际上允许您自动创建多个列而无需拥有所有这些类。看看这个生成器：http://www.generatecss.com/css3/multi-column/

但是，这只是在您尝试使您的内容像报纸一样有多个列时。

将一个CSS列分成2行

2 个答案: