Divs in der gleichen Spalte werden nicht vertikal ausgerichtet

Question

Ich baue eine "Team" -Abschnitt für meine Website, wo die member_body divs von der gleichen Spalte wie das Mitglied img und Mitglied Header oben rutschen beiseite, wenn ich definieren möchte ihre Breite. Was kann in diesen Fällen das Problem sein? Ich möchte, dass sie vertikal ausgerichtet sind und die gleiche Breite haben.

.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

Sie 3 Spalten verwenden (col-md-6 + col-md-5 + col-md-1), verwenden Sie nur 2 (col-md-6 + col-md-6)

UPDATE

• fügen Sie margin:auto zu member_body, wenn Sie möchten, dass es die gleiche width als Bild haben und zentriert wie das Bild.

• entfernen max-width:250px von img in CSS und fügen class="img-responsive"img

Hinweise

• col-xs-* für Demo
hinzugefügt markieren
• Ihre </br> ungültig ist, sollte 012.379.173 seinoder <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

Wenn Sie sie vertikal ausrichten möchten mehrere <div class="row">

So, 1 Team pro <div class="row">