使用 CSS 进行内容定位 [重复]答案

【问题标题】：Content positioning with CSS [duplicate]使用 CSS 进行内容定位 [重复]
【发布时间】：2016-04-02 16:18:13
【问题描述】：

我正在创建一个网站模板。我在定位 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 -->

【问题讨论】：

标签： html css positioning

【解决方案1】：

将垂直对齐添加到您的 css (.col-one,.col-two,.col-three)

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

【讨论】：

【解决方案2】：

`vertical-align: top`

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

【讨论】：

【解决方案3】：

使用

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

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

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

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

【讨论】：