Question

嗨，我正在尝试将我的列放在同一高度。但这是我如何结束的图片：

我曾尝试将分别为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>

Answer 1

解决方案很简单，您应该将<android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="false" android:paddingTop="8dp" android:paddingBottom="8dp" />属性添加到图像的容器或图像本身。图像的纵横比变化，导致图像变小（因此它们可以保持纵横比）。设置max-height将阻止图像缩放超出指定的高度。

Answer 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，因此它适合小提琴结果框架，但它没有任何区别 - ＆gt;的 http://jsfiddle.net/63zvdLyu/

Answer 3

在@davidkonrad所说的基础上，您可以使用这样的margin-top规则来抵消每个图像（内部项目）：

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

列不在同一高度

3 个答案: