Question

我正在制作一个网格，我正在试图弄清楚如何制作两个div，display:inline-block在高度上相互匹配。这可能只使用CSS吗？

例如，请在此处查看此JS小提琴。绿色区域我想成为它的容器的100％，以便它与左容器匹配。

http://jsfiddle.net/franhaselden/kqtLkkz6/

div使用以下网格CSS：

.grid {
    vertical-align:top;
    font-size:0;
    box-sizing:border-box;
    display:inline-block;
    font-size:0%;
}
.grid.golden-small {
    width:61.8%;
}
.grid.golden-large {
    width:38.2%;
}

我尝试通过执行height:auto来明确说明父容器的高度，以便它适合其中的内容，但这似乎不起作用。请看我的第二个例子：

section {
    height:auto; /* and added this */
}
.featured-post .featured-text {
    height:100%; /* added this */
}

http://jsfiddle.net/franhaselden/kqtLkkz6/1/

Answer 1

看看这个。

将父元素的显示设置为表格.featured-post {display: table;}，并将子元素的显示设置为表格单元格.grid {display: table-cell;}我想这是最简单的解决方案（您可以查看here }）它至少可以设置position:absolute，但我不认为这是你的情况。

Answer 2

如果我在哪里，我会换一张桌子。内联定位很难使用。我会尝试通过创建一个父元素来重新创建它，该元素包含要内联到display:table;的所有元素，而display:table-cell;的子元素是我的建议

仅使用CSS匹配两个内联div的高度

2 个答案: