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>

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

1 个答案: