响应网格与相同高度的列

时间:2017-11-09 09:42:54

标签: css responsive-design grid-layout

我正在努力应对简单的布局问题

我有一个带有4个标题框的布局。 当4对("桌面和#34;视图)时,4个框需要相同的高度。 当横跨2时,它们也需要具有相同的高度("平板电脑"视图)。 当全宽("移动"视图)时,高度并不重要。

我设置了一个小提琴来展示我现在拥有的东西&它回应时会发生什么。

https://jsfiddle.net/c5oumq2z/

<div class="report_v3_summary_box">

是为内容添加背景颜色,并在列响应时添加边距。

有人有任何建议吗?

由于

2 个答案:

答案 0 :(得分:0)

我的视图中有两个选项:CSS或JS。

使用JS,您可以使用像matchheight这样的jquery库。

使用CSS,首选方法,您可以使用flexbox属性来获得所需的效果。 Here's a really nice guide到flexbox。 Here's an example(在底部)。

你基本上需要的是(在父容器上,在你的情况下是行):

flex-wrap: wrap;
display: flex;

然后,在.report_v3_summary_box

height: 100%;

将边距移至:.col.l3.m6.s12

答案 1 :(得分:0)

因为我们在2017年,你可以使用&#34; Grid&#34;。 以下是一个如何以最小的努力完成此任务的示例:

https://jsfiddle.net/herrfischerhamburg/ym2rc6tm/1/ (调整浏览器窗口大小,它具有响应性)

1 x 4列的CSS示例:

.grid-container {
    grid-template-rows: 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
}

易?