Bootstrap目录网格

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。希望它有所帮助！

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

＆＃13;

＆＃13;