列不在同一高度

Posted 2023-03-14

【中文标题】列不在同一高度

【英文标题】：Columns are not on the same height

【发布时间】：2016-01-17 03:59:00

【问题描述】：

您好，我正在尝试让我的列保持在相同的高度。但这是我如何结束的图片：

我曾尝试将分别为 700 和 400 的 width 和 height 属性赋予我的 img 标记。但这也没有奏效。这是我如何结束的图片：

这是我的一段代码：

<div class="container">
    <div class="row">
        @foreach ($projects as $project)
            <div class="col-lg-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="data:image/$project->image_type;base64,$project->image">
                </a>
                <h3>
                    <a href="#">  $project->name </a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p </div>
            </div>
        @endforeach
    </div>
    <hr>
    <div class="row text-center">
        <div class="col-lg-12">
            !! $projects->render() !!
        </div>
    </div>
</div>

【参考方案1】：

解决方案很简单，您应该将max-height 属性添加到图像的容器或图像本身。图像的纵横比变化，导致图像变小（因此它们可以保持纵横比）。设置max-height 将防止图像缩放超出指定高度。

【参考方案2】：

将项目包装成flexbox。只需将以下类添加到项目父级，在本例中为 .row ：

.equal-height 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

<div class="row equal-height">
  @foreach ($projects as $project)
  <div class="col-lg-4 portfolio-item">
    <a href="#">
       <img class="img-responsive" src="data:image/$project->image_type;base64,$project->image">
    </a>
    <h3>
      <a href="#">  $project->name </a>
    </h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p </div>
  </div>
  @endforeach
</div>

使用您的标记进行演示，已将 .col-lg-4 更改为 .col-xs-3，因此它适合小提琴结果框架，但没有任何区别 -> http://jsfiddle.net/63zvdLyu/

【讨论】：

我已经按照你的要求做了。但它没有成功:(。结果如下：i.imgur.com/pTRGyjr.png

@superkytoz，我敢肯定，这些盒子的高度相同 - 但您的图像在高度/大小上非常不同。也许这是你真正的问题？

确实是这样。出现此问题，因为我的图像的高度/大小确实不同。但不幸的是我不知道如何解决它。

【参考方案3】：

根据@davidkonrad 所说，您可以使用如下边距顶部规则来偏移每个图像（内部项目）：

JS Fiddle

<div class="row equal-height">
    <div class="col-xs-3 portfolio-item">
        <div class="inner-item-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.
        </div>
    </div>
    <div class="col-xs-3 portfolio-item">
        <div class="inner-item-2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>            
    </div>
    <div class="col-xs-3 portfolio-item">
        <div class="inner-item-3">
            Lorem ipsum dolor sit amet
        </div>
    </div>
</div>

.inner-item-1 
    background-color: green;
    display: block; /* images are inline by default */

.inner-item-2 
    background-color: yellow;
    margin-top: 100px;
    display: block; /* images are inline by default */

.inner-item-3 
    background-color: blue;
    margin-top: 140px;
    display: block; /* images are inline by default */

.portfolio-item 
    border:1px solid red;
    padding: 0;

.equal-height 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;