学习 CSS 的第 2 天。
第一列不像其他两列那样垂直对齐，我用第一列更改了其他两列中的一列，似乎任何第一列都没有在顶部对齐。 Image of Columns .我没有发布的其余 CSS 似乎没有干扰列，那么为什么以及如何解决这个问题？
由于我添加了一些填充，列之间的线没有到达顶部。我如何扩展它们？
/*CSS*/
.types h3 {
text-decoration: underline;
margin-bottom: -5px;
}
.types{
column-count: 3;
column-rule: 2px solid black;
text-align: center;
background-color: #eee;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
box-shadow: 2px 2px 2px black;
padding-top: 5px;
}
编辑#
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interview.css">
<title>Interviews</title>
</head>
<body>
<div class="container">
/*Content that is above the Columns*/
<div class="types">
<h3>Standardised Interview</h3>
<p>
/*First Long Paragraph from image*/
</p>
<h3>Exploratory Interviews</h3>
<p>
/*Second Long Paragraph from image*/
</p>
<h3>Unstructured Interviews</h3>
<p>
/*Third Long Paragraph from image*/
</p>
</div>
/*More content below the Columns*/
</div>
</body>
</html>
最佳答案
标题有需要清零的默认边距。
A CSS reset应该是有序的，但一个快速简单的方法是:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.types h3 {
text-decoration: underline;
margin-bottom: 5px;
}
.types {
column-count: 3;
column-rule: 2px solid black;
text-align: center;
background-color: #eee;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
box-shadow: 2px 2px 2px black;
padding-top: 5px;
}<div class="container">
<div class="types">
<h3>Standardised Interview</h3>
<p>
/*First Long Paragraph from image*/
</p>
<h3>Exploratory Interviews</h3>
<p>
/*Second Long Paragraph from image*/
</p>
<h3>Unstructured Interviews</h3>
<p>
/*Third Long Paragraph from image*/
</p>
</div>关于css - 列文本位置不匹配；延长列线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48723957/