Question

jsfiddle链接：http://jsfiddle.net/7087s2dm/2/

我有两个div，＃one和#two，在div #parent里面。

此处，＃one的高度等于屏幕宽度的50％。但是，＃two的高度取决于它的内容。

我需要使div＃two的高度增加以匹配div＃one的高度，即使页面宽度发生变化，如果页面宽度变得足够小，div＃one的高度变为小于div＃two height，则div＃2的高度应限制为内容本身。

HTML：

<div id = "parent">
<div id="one">
    <img src ="https://gp6.googleusercontent.com/-P53UB3pztC8/AAAAAAAAAAI/AAAAAAAAAAA/edcApVyNYJc/s48-c-k-no/photo.jpg" />
</div>
<div id="two">
    <span>Hello</span><br />
    <span>Hello</span><br />
    <span>Hello</span><br />
    <span>Hello</span><br />
</div>

CSS：

    #parent{
    background-color:yellow;
    max-width:500px;
    height:300px;
}
#one{
    float:left;
    background-color:red;
    width:50%;
}
#one img{
    width:50%;
    margin:25%;
}
#two{
    padding:2%;
    float:right;
    background-color:red;
    width:50%;
    margin-bottom:0;
    box-sizing:border-box;
}
#two span{
    margin:10px;
}

最好的方法是什么？可以用简单的css完成吗？或者我需要使用JS吗？

Answer 1

如果您想在简单的css中使用display:table

<强> JS Fiddle

<强> CSS

#parent{
    background-color:yellow;
    width:500px;
    display:table;
}
#one{
    background-color:red;
    width:50%;
    display: table-cell;
}

#one img{
    width:50%;
}
#two{
    background-color:red;
    width:50%;    display: table-cell;
    margin-bottom:0;
    vertical-align:top;
}
#two span{
    margin:10px;
}

根据父级的高度调整两个div的高度

1 个答案: