如何在这些列上制作底部边框？答案

【问题标题】：How can a make a bottom border on these columns?如何在这些列上制作底部边框？
【发布时间】：2017-11-09 23:26:24
【问题描述】：

这是我的代码：

.column {
  float: left;
  width: 49%;
  margin-left: 0.5%;
}

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

#column1 {
  background-color: #e67e22;
}

#column2 {
  background-color: #3498db;
}

<div class="row">
  <div class="column" id="column1">
    <h2>THIS IS A TEST</h2>
    <h2>THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION</h2>
  </div>
  <div class="column" id="column2">
    <h2>THIS IS A TEST</h2>
    <h2>THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION</h2>
  </div>
</div>

如何在不删除边距的情况下创建底部边框？当我尝试使用填充时，列之间没有空格。

【问题讨论】：

标签： css multiple-columns

【解决方案1】：

您可以像这样添加底部边框：

.row > div {
  border-bottom: 1px solid black;
}

这基本上针对作为类.row 的直接子级的每个div。您还可以调整边框的颜色、粗细和绘制的线条类型。在此处查看选项：https://developer.mozilla.org/en-US/docs/Web/CSS/border

请看下面的演示：

.column {
  float: left;
  width: 49%;
  margin-left: 0.5%;
}

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

#column1 {
  background-color: #e67e22;
}

#column2 {
  background-color: #3498db;
}

/* you can adjust the thickness and colour as desired*/
.row>div {
  border-bottom: 3px solid black; 
}

<div class="row">
  <div class="column" id="column1">
    <h2>THIS IS A TEST</h2>
    <h2>THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION</h2>
  </div>
  <div class="column" id="column2">
    <h2>THIS IS A TEST</h2>
    <h2>THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION - THIS IS A TEST DESCRIPTION</h2>
  </div>
</div>

【讨论】：