Question

我正在尝试将内容拆分为2列

使用以下CSS

.container2 {width: 320px; height: 100px; display: block;}
.image2 {border: 1px solid #F2F3F4;
    float: left;
    height: 50px;
    margin-right: 6px;
    padding: 1px;
    width: 50px;}
.image2 img { height: 50px; width: 50px;}
.text2 {width: 230px; height: 100px; float:left; font-size: 13px;}
.clear2 {clear: both;}

这是我的页面http://www.applicationcatalyst.com/columns/ （但内容是单列）现在我想知道我需要在CSS代码中添加什么额外内容来制作内容分成2列

由于

Answer 1

您应该执行以下操作：

将以下div放在一个div中，使用类'ColumnDiv'或其他东西。（image2＆amp; text2）

所以你有这个：

<div class="ColumnDiv">
<div class="image2">
<img src="http://www.applicationcatalyst.com/storage/other/cakehealth.png"/>
</div>
<div class="text2">Track and Optimize Your Healthcare.</div>
</div>
<div class="ColumnDiv">
<div class="image2">
<img src="http://www.applicationcatalyst.com/storage/other/greengoose.png"/>
</div>
<div class="text2">Farmville for real life, with wireless sensors.</div>
</div>

<div class="clear2"/>

在css中你需要输入以下内容：

.ColumnDiv
{
float:left;
}

现在你的div将显示在彼此旁边。我猜.clear2用于平衡两列的长度。

Answer 2

如果您不想对HTML进行任何更改，可以执行以下操作：

增加.container2的宽度以并排保存两个内容块。
从.clear2删除clear：两者。这允许内容块彼此相邻浮动。

更改后的规则如下：

.container2 {
    width: 640px; 
    height: 100px; 
    display: block; 
}
.clear2{
    clear: none;
}

您将看到的是，您的2列未在主要内容区域中正确居中。要解决此问题，您需要更新以下2个CSS规则以为其提供空间：

#sidebar2Wrapper {
    display: none;
} 

#contentWrapper {
    width: 800px;
}

将内容拆分为2列CSS

2 个答案: