Question

我有一个简单的＆＃34; css问题，我希望两列具有相同的高度，使用 {display： inline-block } 当父容器没有设置高度时，它会失败（目标是不让父设置任何高度，因为它应该由最高列定义。如果可能的话，我希望它是免费的。

<div class="line-wrapper">
    <div class="column1">How to make that of 100% of its parent line-wrapper?</div>
    <div class="column2" style="height:200px">Random content with a larger height</div>
</div>

完整的JSFiddle可在此处找到：

http://jsfiddle.net/darknessm0404/1a4yyyc9/1/

这种问题有解决办法吗？

注意：它必须与vertical-align一起使用

Answer 1

您可以更改这些内容以使用display:table-row和display:table-cell来获取仅限CSS的解决方案：

.line-wrapper {
font-size:0;  /* CANNOT CHANGE : For no space between inline-blocks */
position:relative; /* Tried to get the 100% working, but it fails*/
display:table-row;
}

.line-wrapper > div {
font-size:14px; /* CANNOT CHANGE : For no space between inline-blocks */
display:table-cell; /* CANNOT CHANGE : NO float allowed */
vertical-align:top;
}

http://jsfiddle.net/1a4yyyc9/3/

Answer 2

我见过的仅针对此类问题的CSS解决方案是应用大量填充，然后对div进行大量负边距，这会影响div的效果，然后就是隐藏额外的情况在容器div中创建的空间。

应用保证金和填充

.line-wrapper > div {
    font-size:14px; /* CANNOT CHANGE : For no space between inline-blocks */
    display:inline-block; /* CANNOT CHANGE : NO float allowed */
    vertical-align:top;
    margin-bottom:-9999px;
    padding-bottom:9999px;
}

然后隐藏所有空间

.line-wrapper {
    font-size:0;  /* CANNOT CHANGE : For no space between inline-blocks */
    position:relative; /* Tried to get the 100% working, but it fails*/
    overflow:hidden
}

示例

＆＃13;

.line-wrapper {
    font-size:0;  /* CANNOT CHANGE : For no space between inline-blocks */
    position:relative; /* Tried to get the 100% working, but it fails*/
    overflow:hidden
}



.line-wrapper > div {
    font-size:14px; /* CANNOT CHANGE : For no space between inline-blocks */
    display:inline-block; /* CANNOT CHANGE : NO float allowed */
    vertical-align:top;
    margin-bottom:-9999px;
    padding-bottom:9999px;
}

.column1 {
    width:30%; /* CANNOT CHANGE */
    height:100%; /* <-- Expected to work (should be of the size of .line-wrapper), but it does not */
}
.column2 {
    width:60%;  /* CANNOT CHANGE */
}

/* Unuseful code, just to show a few colors */
.column1 {
    background-color:rgba(0,255,255,0.2);
}
.column2 {
    background-color:rgba(150,200,60,0.2);}
}

＆＃13;

<div class="line-wrapper">
    <div class="column1">How to make that of 100% of its parent line-wrapper?</div>
    <div class="column2">Random contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom</div>
</div>

＆＃13;

当父级没有设置高度时，设置内联块的100％高度

2 个答案: