EDIT＃

Question

学习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;
}

EDIT＃

<!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>

Answer 1

标题有默认边距，需要将其清零。

CSS reset将是有序的，但快速而简单的是：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::before,
::after {
  box-sizing: inherit;
}

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您也可以尝试使用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-direction将项目放在使用媒体查询的较小设备上的单个列中（这是移动优先的示例，当视口大于600px宽时，它将更改为3列）：< / p>

.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>

列文字位置不匹配;延长列线？

EDIT＃

2 个答案: