Question

这很简单，但我不知道如何解决这个问题

<html>
    <body>
        <div style="width:500px; background:black;">
            <div style="display:inline-block; width:200px; height:300px; background:yellow;"></div>
            <div style="display:inline-block; vertical-align: top; width:100px; height:100%; background:pink;"></div>
        </div>
    </body>
</html>

这是我的小提琴：Fiddle

我希望粉红色div的高度与自动设置的黑色div相匹配。

编辑：实际上我想将粉红色高度与黄色高度相匹配，以便黑色的高度也与黄色高度相匹配。

Answer 1

position:absolute可能是一个答案。

<html style="height:100%;">

    <body style="height:auto;position:relative;">
        <div style="width:500px; height:100%; background:black;">
            <div style="display:inline-block; width:200px; height:300px; background:yellow;"></div>
            <div style="display:inline-block; vertical-align: top; width:100px; height:100%; background:pink;position:absolute;
left:100px;
margin-left:0.25em;
top:0;
bottom:0;"></div>
        </div>
    </body>

</html>

http://jsfiddle.net/QG572/2/

或使用display:table保留流程中的所有内容：

<html style="height:100%;">

    <body style="">
        <div style="width:500px; height:100%;display:table; background:black;">
            <div style="display:table-cell; width:200px; height:300px; background:yellow;"></div>
            <div style="display:table-cell; vertical-align: top; width:100px; height:100%; background:pink;"></div>
            <div style="display:table-cell;"><!-- to fill 100px left--></div>
        </div>
    </body>

</html>

http://jsfiddle.net/QG572/3/

Answer 2

在包装器div中设置高度并让子容器继承高度可能对您有用。

HTML：

<html>
    <body>
        <div class="black">
            <div class="yellow"></div>
            <div class="pink"></div>
        </div>
    </body>
</html>

CSS：

    .black{
        width: 500px;
        height: 300px;
        background: black;
    }
    .black div {
         display: inline-block;
        width: 200px;
        height: inherit;
    }

    .yellow{
        background: yellow;
    }
    .pink {
        background: pink;
    }

使div的高度与其父div的高度相匹配，该高度设置为auto

2 个答案: