CSS 文本列

Question

我目前正在学习 HTML/CSS，并且遇到了有关文本列的挑战。我正在尝试重新创建 www.campaignmonitor.com 作为练习。

这是挑战:

我有一个使用两列布局的文本区域，其中包含 4 个文本段落。我想让最上面的两个段落在顶部边缘对齐，下面的两个段落也在它们的顶部边缘对齐。换句话说，如果顶部段落中的任何一个增加高度，下面的两个段落将一起向下移动。

我明白这对你们这些 CSS 专业人士来说可能是一个基本问题，但我被这个问题难住了，在线资源、教程和其他网站都没有给我任何成功。

感谢所有帮助!

汤姆

---

这是我使用的代码:

<div class="content">
    <div class="row1">
    <div class="col1a">
        <h4>Create & send beautiful emails</h4>
        <p>Design great looking emails using your own tools, or create templates and let your clients send their own.</p>
    </div><!-- /end #col1a -->
    <div class="col2a">
        <h4>Manage lists & subscribers</h4>
        <p>We handle signups, unsubscribes and bounces automatically. Easily create targeted segments of subscribers.</p>
    </div><!-- /end #col2a -->
    </div><!-- /end #row1 -->
    <div class="row2">
    <div class="col1b">
        <h4>Powerful Analytics</h4>
        <p>Actionable reports that go beyond opens and clicks. Track your email related conversions and sales.</p>
    </div><!-- /end #col1b -->
    <div class="col2b">
        <h4>Mark-up, Resell and Profit</h4>
        <p>White-label and rebrandable, you set the price your clients pay and we’ll send through your profit each month.</p>
    </div><!-- /end #col2b -->
    </div><!-- /end #row2 -->
</div>

还有 CSS:

.content {
    width: 1024px;
    margin: auto;
    position: relative;
    margin-top: 20px;
    color: #333;
    background-color: #666;
}

.col1a {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col2a {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col1b {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col2b {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.row1 {
    position: relative;
    width: 490px;
    background-color: orange;
}

.row2 {
    position: relative;
    width: 490px;
    background-color: green;
}

.content h4 {
    margin-top: 25px;
    margin-bottom: 7px;
    line-height: 22px;
    font-weight: normal;
    font-style: normal;
    font-size: 17px;
}

.content p {
    font-size: 13px;
    line-height: 18px;
}

Answer 1

将 clear: both 添加到行元素。

您的元素命名非常多余，col1a、col1b、col2a 和 col2b 做同样的事情所以它们都可以简单地命名为 col。行元素也是如此，它们也是无用的边界。

http://jsfiddle.net/yTJTp/1/