Question

我正在创建一个网站模板。我遇到了一个问题，即定位了3个包含内容块的单个列。我的目标是每个列的第一个内容块从各个位置的顶部显示。

试图更清楚。我希望每列中的每个内容块都在同一顶行开始，然后根据需要向下延伸。但是现在只有中间列的中间内容块显示在顶行，并且因为它比其他2列长，所以它们与其底线对齐。

.main {
  display: block;
  position: relative;
  width: 1181px;
  margin: 0 auto;
  padding: 0 auto;
}
.col-one,
.col-two,
.col-three {
  display: inline-block;
  position: relative;
  margin-top: 50px;
}
.col-block-one,
.col-block-two,
.col-block-three {
  display: block;
  position: relative;
  background-color: white;
  width: 360px;
  margin-left: 15px;
  margin-right: 15px;
}
.col-one-title,
.col-two-title,
.col-three-title {
  display: block;
  position: relative;
  font-size: 24px;
  font-weight: 500;
  padding: 24px;
}
.col-one-content,
.col-two-content,
.col-three-content {
  display: block;
  position: relative;
  font-size: 18px;
  padding-right: 24px;
  padding-left: 24px;
  padding-bottom: 24px;
}

<div class="main">
  <div class="col-one">
    <div class="col-block-one">
      <p class="col-one-title">HTML Introduction, What is HTML</p>
      <p class="col-one-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-one -->
  </div>
  <!-- end of col-one -->
  <div class="col-two">
    <div class="col-block-two">
      <p class="col-two-title">HTML Introduction, What is HTML</p>
      <p class="col-two-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext
        Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-two -->
  </div>
  <!-- end of col-two -->
  <div class="col-three">
    <div class="col-block-three">
      <p class="col-three-title">HTML Introduction, What is HTML</p>
      <p class="col-three-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-three -->
  </div>
  <!-- end of col-three -->
</div>
<!-- end of main -->

Answer 1

使用

.col-one, .col-two, .col-three {
  vertical-align: top;

将解决您的问题，确保内容在顶行对齐：

＆＃13;

.main {
  display: block;
  position: relative;
  width: 1181px;
  margin: 0 auto;
  padding: 0 auto;
}
.col-one,
.col-two,
.col-three {
  vertical-align: top;
  display: inline-block;
  position: relative;
  margin-top: 50px;
}
.col-block-one,
.col-block-two,
.col-block-three {  
  display: block;
  position: relative;
  background-color: white;
  width: 360px;
  margin-left: 15px;
  margin-right: 15px;
}
.col-one-title,
.col-two-title,
.col-three-title {
  display: block;
  position: relative;
  font-size: 24px;
  font-weight: 500;
  padding: 24px;
}
.col-one-content,
.col-two-content,
.col-three-content {
  display: block;
  position: relative;
  font-size: 18px;
  padding-right: 24px;
  padding-left: 24px;
  padding-bottom: 24px;
}

＆＃13;

<div class="main">
  <div class="col-one">
    <div class="col-block-one">
      <p class="col-one-title">HTML Introduction, What is HTML</p>
      <p class="col-one-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-one -->
  </div>
  <!-- end of col-one -->
  <div class="col-two">
    <div class="col-block-two">
      <p class="col-two-title">HTML Introduction, What is HTML</p>
      <p class="col-two-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext
        Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-two -->
  </div>
  <!-- end of col-two -->
  <div class="col-three">
    <div class="col-block-three">
      <p class="col-three-title">HTML Introduction, What is HTML</p>
      <p class="col-three-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-three -->
  </div>
  <!-- end of col-three -->
</div>
<!-- end of main -->

＆＃13;

Answer 2

`vertical-align: top`

.col-one, .col-two, .col-three {
    …
    vertical-align: top;
}

Answer 3

为你的css添加vertical-align（.col-one，.col-two，.col-three）

.col-one,
.col-two,
.col-three {
  display: inline-block;
  position: relative;
  margin-top: 50px;
  vertical-align:top; 
}

使用CSS进行内容定位

3 个答案:

`vertical-align: top`