同一列中的 div 不会垂直对齐

Question

我正在为我的网站建立一个“团队”部分，如果我想定义它们的宽度，与成员 img 和上面的成员标题位于同一列中的 member_body div 会滑到一边。在这种情况下可能会出现什么问题？我希望它们垂直对齐并具有相同的宽度。

.member {
  padding: 30px;
  text-align: center;
  position: relative;
}
.member img {
  max-width: 250px;
  margin: 20px auto 0px auto;
}
.member h3 {
  margin: 30px 0px;
}
.member_body {
  border: 1px solid red;
  max-width: 250px;
  overflow: hidden;
  height: 200px;
}
.member_body span {
  margin-top: 20px;
  font-size: 30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="team">
  <h1>Our Team</h1>
  <div class="separator2"></div>
  <div class="container-fluid">
    <div class="row">
      <div class=" col-md-6">
        <div class="member">
          <h3>Member One</h3>
          <img src="photos/team-member-1.jpg" alt="Team Member 1">
          <div class="member_body">
            <h5>Position</h5>
            <div class="separator"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</br>Voluptates praesentium nulla cupiditate!</p>
            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          </div>
        </div>
      </div>
      <div class=" col-md-5">
        <div class="member">
          <h3>Member 2</h3>
          <img src="photos/team-member-2.jpg" alt="Team Member 2">
          <div class="member_body">
            <h5>Position</h5>
            <div class="separator"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</br>Voluptates praesentium nulla cupiditate!</p>
            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          </div>
        </div>
      </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

`

Answer 1

您使用 3 列 (col-md-6+ col-md-5 + col-md-1)，只需使用 2 (col-md-6 + col-md-6)

更新

• 如果您希望width 与图像具有相同的width 并保持图像居中，请将margin:auto 添加到member_body。

• 从 CSS 中的 img 中删除 max-width:250px 并将 class="img-responsive" 添加到标记 img

备注

• 为演示添加了col-xs-*
• 您的</br>无效，应为<br>或<br />

.member {
  padding: 30px;
  text-align: center;
  position: relative;
}
.member img {
  margin: 20px auto 0;
}
.member h3 {
  margin: 30px 0px;
}
.member_body {
  border: 1px solid red;
  max-width: 250px;
  overflow: hidden;
  height: 200px;
  margin:auto
}
.member_body span {
  margin-top: 20px;
  font-size: 30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="team">
  <h1>Our Team</h1>
  <div class="separator2"></div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-md-6">
        <div class="member">
          <h3>Member One</h3>
          <img class="img-responsive" src="//lorempixel.com/250/200" alt="Team Member 1">
          <div class="member_body">
            <h5>Position</h5>
            <div class="separator"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              <br />Voluptates praesentium nulla cupiditate!</p>
            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-md-6">
        <div class="member">
          <h3>Member 2</h3>
          <img class="img-responsive" src="//lorempixel.com/250/200" alt="Team Member 2">
          <div class="member_body">
            <h5>Position</h5>
            <div class="separator"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates
              <br />praesentium nulla cupiditate!</p>
            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

如果要垂直对齐它们，请使用多个<div class="row">

所以，每个<div class="row"> 1 个团队