Question

我有一个基于网格的布局，其中的项目都具有可变高度。如何强制所有物品与最高元素具有相同的最大高度？这可能是纯CSS还是我必须求助于javascript？

HTML

<div class="container">
    <div class="row">
        <div class="col-9">
            <div class="col-4">
                <div class="top">
                </div>
                <div class="bottom">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lectus vitae massa rhoncus ullamcorper sed ut elit. Nam id lacus eu dui 
                    </p>
                </div>
            </div>
            <div class="col-4">
                <div class="top">
                </div>
                <div class="bottom">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lectus vitae massa rhoncus ullamcorper sed ut elit. Nam id lacus eu dui 
                    </p>
                </div>
            </div>
            <div class="col-4">
                <div class="top">
                </div>
                <div class="bottom">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lectus vitae massa rhoncus ullamcorper sed ut elit. Nam id lacus eu dui 
                    </p>
                </div>
            </div>
            <div class="col-4">
                <div class="top">
                </div>
                <div class="bottom">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lectus vitae massa rhoncus ullamcorper sed ut elit. Nam id lacus eu dui 
                    </p>
                </div>
            </div>
            <div class="col-4">
                <div class="top">
                </div>
                <div class="bottom">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lectus vitae massa rhoncus ullamcorper sed ut elit. Nam id lacus eu dui 
                    </p>
                </div>
            </div>
            <div class="col-4">
                <div class="top">
                </div>
                <div class="bottom">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lectus vitae massa rhoncus ullamcorper sed ut elit. Nam id lacus eu dui 
                    </p>
                </div>
            </div>
        </div>
        <div class="col-3">
        </div>
    </div>
</div>

CSS

.container {
    width: 980px;
}
.col-9 {
    float: left;
    width: 75%;
}
.col-4 {
    float: left;
    border: solid red 1px;
    width: 33.333333%
}
.col-3 {
    height: 50px;
    border: solid green 1px;
    float: left;
    width: 25%;
}
.top {
    height: 100px;
    border-bottom: solid grey 1px;
}

未破坏： Fiddle

此布局按预期排列，当项目的文本比其他项目大时，会出现问题。

破碎： Fiddle

Answer 1

Flexboxes轻松应对：

我添加了

.col-9{
    display: flex;
    flex-flow: row wrap;
}
.col-4{
    flex: 1 0 33%;
}

到your fiddle。

Answer 2

文本正在推送父容器;在这种情况下.bottom。您可以使用.bottom和max-height修复overflow-y: hidden容器。您还可以使用text-overflow属性管理<p>标记上的文字有几种方法可以解决这个问题。

这是我常用的<p>代码“truncate”代码段。

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

强迫所有兄弟姐妹的身高相等

2 个答案: