css“显示：3 列的内联块”

Question

我想知道每次我在 display-inline-block CSS 方法的第一列中设置宽度时，另一列会下降多少像素，但是如果我使用填充而不是宽度其他列不会下降。有人可以向我解释为什么会这样吗？新手在这里

第一列第一张图片使用宽度

第二张图片使用填充

代码

body {
  font-family: "Arial",Helvetica, sans-serif, serif;
  color: white;
  background: gray;
  margin: 0;
}
div.wrapper {
  border: 3px black dashed;
}

/*===============header===================*/
header.main-header {
  border: 2px pink dashed;
}
h1.main-h1 {
  margin: 10px 0 0 0;
  border: 1px black solid;
  text-align: center;
}
p.p-header {
  font-style: italic;
  margin-top: 0;
  padding-left: 57.5%;
  position: absolute;
  top: 27px; 
  line-height: 12px;
}
/*==============end of header============*/

/*==============navigation bar===========*/
nav.main-nav {
  border: 2px green solid;
  text-align: center;
}
p.p-nav {
  margin: 0;
  right: 1%;
}
/*============end of navigation=========*/

/*============section===================*/
div.column {
  border: 2px blue dashed;
}
section.second-column, section.third-column, section.first-column {
  border: 2px brown solid;
  display: inline-block;
  height: 450px;
}
section.first-column {
  padding-right: 4%;
  margin-left: 1%;
}
section.second-column {
  width: 60%;
  margin-left: 1%;
}
section.third-column {
  width: 20%;
  margin-left: 1%;
}
/*==============footer==================*/
footer.main-footer {
  border: 1px white solid;
  text-align: center;
  clear: both;
}
/*=============end of footer===========*/

<!DOCTYPE HTML>
<html lang="eng">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="_css/typhography.css">
    <title>Typhography</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="main-header">
        <h1 class="main-h1">Typhography</h1>
        <p class="p-header">learning things<br>with showe</p>
      </header>
      <nav class="main-nav">
        <p class="p-nav">This is for Navigation Section</p>
      </nav>
      <div class="column">
        <section class="first-column">This is first column</section>
        <section class="second-column">This is second column</section>
        <section class="third-column">This is third column</section>
      </div>
      <footer class="main-footer">
        <small>this is footer</small>
      </footer>
    </div>
  </body>
</html>

Answer 1

将 vertical-align: top 设置为您的列元素。

section.second-column, section.third-column, section.first-column {
  border: 2px brown solid;
  display: inline-block;
  height: 450px;
  vertical-align: top;
}

您可以阅读更多关于 vertical-align here and here

css“显示：3 列的内联块”

css " display: inline-block for 3 column"

html

css

vertical-alignment