两个内嵌div与仅CSS匹配的高度

Question

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

例如，请参见这里的JS Fiddle。我希望它的绿色区域是100%的容器，这样它就能与左边的容器相匹配。

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

divs使用以下网格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

如果我在你的地方，我会做一张桌子。内嵌定位很难使用。我会尝试通过创建一个父元素来重做它，这个父元素包含了您想要内联地堆栈到display:table;的所有元素，而display:table-cell;的子元素则是我的建议。

Answer 2

看看这个。

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