css -当它们有不同的宽度时，如何获得(响应)李的相同高度？

Question

这是我目前的情景：

• 我有一个包含4个li元素的行，每个元素都有一个引导类-xs-3‘类，以便每个元素在该行中占据相同的空间。
• 我还给出了每边5 5px填充的元素。
• 我去掉了第一里的左垫和最后一里的右垫。
• 所有的李氏都有一个图像，所有的图像都有相同的大小(宽度: 800，高度: 600)

问题是：

• 由于填充物的不同，李2和李3(它们有更多的填充物)变得更宽，因此，它们的高度不同，当你看到图像时，就可以看到它们。

​

​

有这样的宽度差时，有没有办法让李的(和图像)有相同的高度呢？提前感谢！

HTML：

<div id="other-posts-container" class="col-xs-12 no-padding">
    <h3 class="title col-xs-12 no-padding">Title here</h3>
    <ul id="dont-miss-posts" class="col-xs-12">
        <div class="row">
            <li class="col-xs-3 no-padding">
                <a href="#">
                    <img src="img/post-1.png">
                    <p class="post-title">Sushi de qualidade fora do centro de Lisboa</p>
                </a>
            </li>
            <li class="col-xs-3 no-padding">
                <a href="#">
                    <img src="img/post-2.png">
                    <p class="post-title">Sushi de qualidade fora do centro de Lisboa</p>
                </a>
            </li>
            etc

CSS：

#other-posts-container li {
    padding: 0 5px;
}

#other-posts-container li img {
    max-width: 100%;
    height: auto;
}

#other-posts-container li:nth-of-type(1) {
    padding-left: 0;
}
#other-posts-container li:nth-of-type(4) {
    padding-right: 0;
}

Answer 1

1. 您的HTML结构是不正确的(您没有正确地使用rows，div不允许作为ul的直接子级，您在col-xs-12中使用col-xs-12 )。我的HTML解决方案：

​

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">
      <a href="">
        <img src="http://placehold.it/800x600" class="img-responsive">
        <p>Sushi de qualidade fora do centro de Lisboa</p>
      </a>
    </div>
    <div class="col-xs-3">
      <a href="">
        <img src="http://placehold.it/800x600" class="img-responsive">
        <p>Sushi de qualidade fora do centro de Lisboa</p>
      </a>
    </div>
    <div class="col-xs-3">
      <a href="">
        <img src="http://placehold.it/800x600" class="img-responsive">
        <p>Sushi de qualidade fora do centro de Lisboa</p>
      </a>
    </div>
    <div class="col-xs-3">
      <a href="">
        <img src="http://placehold.it/800x600" class="img-responsive">
        <p>Sushi de qualidade fora do centro de Lisboa</p>
      </a>
    </div>
  </div>
</div>

1. 您可以为您的所有项目设置填充，并向row添加负值(以正确地对齐整个容器)。

​

.row {
  margin-left: -5px;
  margin-right: -5px;
}
.row > [class*='col-'] {
  padding-left: 5px;
  padding-right: 5px;
}

CODEPEN