Question

我有这个代码结构

.col_1_6 {
    width: 70%;
    float: left;
}

.col_1_4 {
    width: 30%;
    float: left;
}

.row-content {
    clear:both;
    padding-bottom: 105px;
}

<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

我想在row-content之间设置一个保证金，但我尝试设置padding-bottom: 105px，但它仍然不起作用。

如何在这些行之间设置一个干净的边距？

Answer 1

添加以下代码将解决您的问题。

.row-content::after {
  content: "";
  clear: both;
  display: table;
}

.col_1_6 {
    width: 70%;
    float: left;
}

.col_1_4 {
    width: 30%;
    float: left;
}

.row-content {
    clear:both;
    padding-bottom: 105px;
}
.row-content::after {
  content: "";
  clear: both;
  display: table;
}

<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

Answer 2

当在容器中浮动元素时，您遇到了一个非常常见的问题。容器将折叠到非浮动元素的高度（在这种情况下，没有）。一个＆＃39; hack＆＃39;许多人使用的称为＆＃39; clearfix＆＃39;哈克，这是乌斯曼所指的。这是一篇快速文章，您应该在需要创建.clearfix类时参考！创建一个类使得该解决方案不仅可以在.row-content元素上重用。将clearfix类应用于任何容器，只要其内容被浮动，您希望它保持高度。

http://nicolasgallagher.com/micro-clearfix-hack/

Answer 3

课堂上你不需要 float:left - .col_1_6 请从row-content后者删除边框。

您也可以访问DEMO @ JSFiddle。

<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
.col_1_6 {
    width: 70%;
}

.col_1_4 {
    width: 30%;
    float: left;
}

.row-content {
    clear:both;
    /*padding-bottom: 105px;*/
    border: 1px solid #c4c4c4;
    margin-bottom:50px;
}
</style>
</head>
<body>
<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

</body>
</html>

如何在行之间设置边距

3 个答案: