学习CSS的第2天。
第一列没有像其他两个那样垂直对齐，我将另外两个列与第一列更改为一列，似乎任何第一列都不在顶部对齐。列的图像。似乎我没有发布的其余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重置是按顺序进行的，但是快速而简单的是：
* {
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>您也可以尝试使用flex-box来执行此操作。
.types h3 {
text-decoration: underline;
margin-bottom: -5px;
}
.types{
display:flex;
align-items:flex-start;
}
.types div {
border:2px solid red;
margin:20px;
text-align:center;
padding:5px;
}<body>
<div class="container">
/*Content that is above the Columns*/
<div class="types">
<div><h3>Standardised Interview</h3>
<p>
/*First Long Paragraph from image*/
</p></div>
<div><h3>Exploratory Interviews</h3>
<p>
/*Second Long Paragraph from image*/
</p></div>
<div><h3>Unstructured Interviews</h3>
<p>
/*Third Long Paragraph from image*/
</p></div>
</div>
/*More content below the Columns*/
</div>
</body>然后，您可以使用Flex方向将项目放入较小设备上的单列中(这是一个移动优先示例，当视口大于600px宽时，它将更改为3列(：
.types h3 {
text-decoration: underline;
margin-bottom: -5px;
}
.types {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.types div {
border: 2px solid red;
text-align: center;
padding: 5px;
box-sizing: border-box;
width: 100%;
}
@media all and (min-width:600px) {
.types {
flex-direction: row;
}
}<body>
<div class="container">
/*Content that is above the Columns*/
<div class="types">
<div>
<h3>Standardised Interview</h3>
<p>
/*First Long Paragraph from image*/
</p>
</div>
<div>
<h3>Exploratory Interviews</h3>
<p>
/*Second Long Paragraph from image*/
</p>
</div>
<div>
<h3>Unstructured Interviews</h3>
<p>
/*Third Long Paragraph from image*/
</p>
</div>
</div>
/*More content below the Columns*/
</div>
</body>