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

Question

我正在处理一个网格，我正在尝试弄清楚如何制作两个高度 display:inline-block 彼此匹配的 div。这可能仅使用 CSS?

例如，请在此处查看此 JS Fiddle。绿色区域我希望是它容器的 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

看看这个。

将父元素的显示设置为table、.featured-post {display: table;}，将子元素的显示设置为table-cell，.grid {display: table-cell;} 我猜这是最简单的解决方案（您可以查看 here）它至少会在您设置 position:absolute 时起作用，但我认为您的情况并非如此。

Answer 2

如果我在你那里，我会改成 table。内联定位很难使用。我会尝试通过制作一个父元素来重新制作它，该父元素包含您想要内联堆叠到 display:table; 的所有元素，而 display:table-cell; 的子元素是我的建议

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

Matching height of two inline divs with just CSS

css

responsive-design