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

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。下面是一个例子。

.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指南。

Flexbox可以处理这个用例等等。它受到当前浏览器的良好支持。

以下是使用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网格是一种更先进的技术(如评论中所建议的(。它受到现代浏览器的良好支持，但在Internet Explorer中的功能有限。