Bootstrap Directory Grid

Question

Добрый вечер,

Я пытаюсь написать сетку, которая будет служить справочником сотрудников. Он будет содержать миниатюру слева, а имя и название справа. Я хотел бы, чтобы имя и название были вертикально выровнены посередине. Помимо проблемы вертикального выравнивания, у меня также возникает проблема, когда имя или заголовок становятся слишком длинными, он охватывает весь диапазон под изображением.

Вот CSS и разметка (с использованием самого последнего Bootstrap). Может ли кто-нибудь протянуть руку?

<!-- Begin People Listing --> 
<style type="text/css"> 
ul.people-list { 
    margin: 0; 
    padding: 0; 
} 

ul.people-list li { 
    list-style: none; 
    padding: 0; 
} 

ul.people-list li a { 
    display: block; 
    border: 2px solid #eee; 
    margin: 5px; 
    padding: 30px; 
    min-height: 125px; 
} 

ul.people-list li a:hover { 
    background: #eee; 
} 

ul.people-list span { 
    display: block; 
    float: left; 
} 

ul.people-list span.portrait { 
    border: 0px solid red; 
    margin-right: 20px; 
} 

ul.people-list span.name { 
    border: 0px solid blue; 
} 

ul.people-list span.name h4 { 
    margin: 0; 
    color: #00654e; 
} 

ul.people-list span.name h5 { 
    color: #000; 
    margin: 0; 
} 


</style> 

<ul class="row people-list"> 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
     <a class="clearfix" href="#"> 
      <span class="portrait"> 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
      </span> 
      <span class="name"> 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
       <h5>Criminal Justice Administration</h5> 
      </span> 
     </a> 
    </li> 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
     <a class="clearfix" href="#"> 
      <span class="portrait"> 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
      </span> 
      <span class="name"> 
       <h4>Dr. Catherina Abbott</h4> 
       <h5>Assistant Professor of Mathematics</h5> 
      </span> 
     </a> 
    </li> 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
     <a class="clearfix" href="#"> 
      <span class="portrait"> 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
      </span> 
      <span class="name"> 
       <h4>Catherina Abbott</h4> 
       <h5>Mathematics</h5> 
      </span> 
     </a> 
    </li> 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
     <a class="clearfix" href="#"> 
      <span class="portrait"> 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
      </span> 
      <span class="name"> 
       <h4>Catherina Abbott</h4> 
       <h5>Mathematics</h5> 
      </span> 
     </a> 
    </li> 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
     <a class="clearfix" href="#"> 
      <span class="portrait"> 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
      </span> 
      <span class="name"> 
       <h4>Catherina Abbott</h4> 
       <h5>Mathematics</h5> 
      </span> 
     </a> 
    </li> 
</ul> 
<!-- End People Listing --> 

Answer 1

Это может быть упрощены много (я думаю), поместив people-list класс внутри column, затем добавить свой стиль оттуда.

* Если это необходимо для использования с использованием формата списка, который может быть заменен в зависимости от того, как он в конечном итоге нуждается в его структурировании.

Сетка Пример

.people-list { 
 
    display: block; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
    margin: 10px auto; 
 
    border: 2px solid #eee; 
 
} 
 
a.people-list:hover { 
 
    background-color: #eee; 
 
    text-decoration: none; 
 
} 
 
.portrait, 
 
.name { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 
.name h4 { 
 
    color: #00654e; 
 
} 
 
.name h5 { 
 
    color: #000; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </div> 
 
    </div> 
 
</div>

Пример списка

.people-list { 
 
    display: block; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
    margin: 10px auto; 
 
    border: 2px solid #eee; 
 
} 
 
a.people-list:hover { 
 
    background-color: #eee; 
 
    text-decoration: none; 
 
} 
 
.portrait, 
 
.name { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 
.name h4 { 
 
    color: #00654e; 
 
} 
 
.name h5 { 
 
    color: #000; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <ul class="row list-unstyled"> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a class="people-list" href="#"> 
 
     <span class="portrait"> 
 
       <img src="http://lorempixel.com/100/100/people" class="img-circle"> 
 
      </span> 
 
     <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 

 

 
     </a> 
 

 
    </li> 
 
    </ul> 
 
</div>

Answer 2

Я сделал некоторые изменения в вашем коде, удалив некоторые высоты и ненужные классы для достижения вашей цели.

Взгляните на plunkr. Надеюсь, поможет!

/* Styles go here */ 
 

 
ul.people-list { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul.people-list li { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
ul.people-list li a { 
 
    display: block; 
 
    border: 2px solid #eee; 
 
    margin: 5px; 
 
    padding: 30px; 
 
} 
 

 
ul.people-list li a:hover { 
 
    background: #eee; 
 
} 
 

 
ul.people-list span { 
 
    display: block; 
 
    float: left; 
 
} 
 

 
ul.people-list span.portrait { 
 
    border: 0px solid red; 
 
} 
 

 

 
ul.people-list span.portrait img{ 
 
    width:100%; 
 
} 
 

 
ul.people-list span.name { 
 
    border: 0px solid blue; 
 
} 
 

 
ul.people-list span.name h4 { 
 
    margin: 0 0 10px 0; 
 
    color: #00654e; 
 
} 
 

 
ul.people-list span.name h5 { 
 
    color: #000; 
 
    margin: 10px 0 0 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
 
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 
    <script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <ul class="row people-list"> 
 
    <li class="col-xs-12 col-sm-6 col-md-4"> 
 
     <a href="#"> 
 
     <div class="row"> 
 
      <div class="col-xs-3 col-sm-4 col-md-4"> 
 
      <span class="portrait"> 
 
       <img src="http://lorempixel.com/500/500/people" class="img-circle" /> 
 
      </span> 
 
      </div> 
 
      <div class="col-xs-9 col-sm-8 col-md-8"> 
 
      <span class="name"> 
 
       <h4>Dr. Someone somebody with a really really long name?</h4> 
 
       <h5>Criminal Justice Administration</h5> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>