css - 如何在这些列上制作底部边框？

Question

这是我的代码:

.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>

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

Answer 1

你可以像这样添加一个底部边框:

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

这基本上针对每个 div 类 .row 的直接子类。您还可以调整边框的颜色、粗细和绘制的线条类型。请在此处查看选项: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>