Question

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

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

<强>更新

将margin:auto添加到member_body，如果您希望它与图片具有相同的width，并将其保持为图像的中心位置。
从CSS中的max-width:250px移除img，然后将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">

一个团队

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

2 个答案: