如何修复没有填充的中间列？

Question

我正在制作一个模仿 Drudge Report 的网站来练习。

在编码时，我注意到中间列的填充似乎不起作用。 <hr> / 分隔线旁边没有空格，这真的很影响整体外观。

a {
  color: black;
}

.container {
  font-size: 12.5px;
}

.top-list ul {
  margin: 0;
  margin-top: 70px;
  padding: 0;
  font-family: COURIER, sans-serif;
  font-weight: bolder;
  list-style: none;
  text-decoration: underline;
}

.top-list li:nth-child(3) a {
  color: red;
  text-decoration: underline;
  text-decoration-color: red;
}

.top-list li:nth-child(10) a {
  color: red;
  text-decoration: underline;
  text-decoration-color: red;
}

.main-image {
  margin-top: 30px;
  text-align: center;
}

.middle-text {
  font-family: ARIAL, VERDANA, HELVETICA;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.middle-text p {
  margin: 0px;
  padding: 0px;
  font-size: 47px;
}

.middle-text img {
  margin-bottom: 45px;
}

.left-column {
  float: left;
  width: 33%;
  padding-right: 5px;
  font-family: COURIER, sans-serif;
  text-decoration: underline;
  font-weight: bolder;
  border-right: 1px solid #000;
  height: 2460px;
}

.left-column img {
  width: 200px;
}

.middle-column {
  text-align: center;
  width: 33%;
  padding-left: 5px;
  padding-right: 5px;
  font-family: COURIER, sans-serif;
  text-decoration: underline;
  font-weight: bolder;
}

.middle-column img {
  width: 200px;
}

.right-column {
  float: right;
  width: 33%;
  padding-left: 5px;
  font-family: COURIER, sans-serif;
  text-decoration: underline;
  font-weight: bolder;
  border-left: 1px solid #000;
  height: 2460px;
}

.right-column img {
  width: 200px;
}

<!-- Left Column -->

<div class="left-column">
  <div class="container">
    <a href="http://www.zerohedge.com/">ZERO HEDGE</a>
    <hr>
  </div>
</div>

<!-- Right Column -->

<div class="right-column">
  <div class="container">
    <img src="images/people.jpg">
    <p><a href="https://apnews.com/article/donald-trump-pandemics-europe-basketball-meghan-markle-abc35f110e954524437eb7142912cd6a">In year dominated by pandemic, many other dramas unfolded...</a></p>
    <hr>
  </div>
</div>

<!-- Middle Column -->

<div class="middle-column">
  <div class="container">
    <img src="images/person.jpg" alt="Person">
    <hr>
    <p><a href="https://www.independent.co.uk/news/world/americas/virgin-galactic-space-plane-test-abort-b1771292.html">GALACTIC forced to abort key test flight of space plane...</a></p>
    <p><a href="https://apnews.com/article/space-tourism-new-mexico-us-news-coronavirus-pandemic-bccddfbcb8019dd7e3a58c320d5f79c4"><i>Rocket motor fails to ignite...</i></a></p>
  </div>
</div>

完整的 HTML 可以在 PasteBin 上找到。

Answer 1

上面的HTML/CSS好像是用floatCSS属性实现了3列布局

这是一种陈旧且低效的方式（Flexbox 用于列，Grid 用于更复杂的布局）。

使用 float 的注意事项是 middle-column 不应该设置 width 并且应该设置 margin-left 和 margin-right 匹配左和右列大小。 Here's一个例子。

.middle-column {
  /* width: 33%; do not apply width, it would not fit */
  margin-left: 33%; /* skip over left column */
  margin-right: 33%; /* skip over right column */
}

以上样式应该可以解决问题。但我建议查看 Flexbox guide.

Flexbox could handle this use-case and more. It's well supported 当前浏览器。

Here's 使用 Flexbox 的 3 列布局：

.flex-row {
  display: flex;
  flex-direction: row;
}

.left-column {
  width: 33%;
}

.right-column {
  width: 33%;
}

.middle-column {
  width: 33%;
}

<div class="flex-row">
  <div class="left-column">
    Left column
  </div>

  <div class="middle-column">
    Middle column
  </div>

  <div class="right-column">
    Right column
  </div>
</div>

P.S.

CSS grid is an even more advanced technique (as suggested in comments). It is well supported 适用于现代浏览器，但在 Internet Explorer 中功能有限。

如何修复没有填充的中间列？

How can I fix the middle column not having padding?

html

css

border