Я создаю раздел «команда» для моего сайта, где divs member_body
, содержащиеся в том же столбце, что и член img
, и заголовок элемента выше, если вы хотите определить их ширины. Что может быть проблемой в этом случае? Я хочу, чтобы они были вертикально выровнены и имели одинаковую ширину.Divs в том же столбце не выравниваются по вертикали
.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>
`
Маржа: 20px авто? в классе member_body? – Pushpendra