Question

我有两个显示在一起的div，左边的div是20%宽度，右边是80%宽度。

现在左边的div包含水平调整大小的图像，因此它的高度未知且不断变化。

现在当这个div调整父级高度增加或减少时，所以当发生这种情况时，我需要正确的div来调整大小，我该怎么做？

Answer 1

您可以尝试table-cell媒体资源上的CSS3 display值：http://jsfiddle.net/UJYyw/5/

使用

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>

您只需在table-cell和div.one

上应用div.two展示广告

.one, .two{
    display:table-cell;
}

兼容的浏览器将按照td和th标记的方式调整元素的高度。

Answer 2

您可以使用jQuery来执行此操作。

$('.container').css({'height':$('.one').height()});

See a jsFiddle here

当您更改css中.one的值时，它会更新.container的大小，因此也会更新.two的大小。

Answer 3

这是一个只使用浮动和几个包装的交叉浏览器解决方案http://jsfiddle.net/RSPbD/

<强> HTML

<div class="container">
    <div class="wrap1">
        <div class="wrap2">
            <div class="one">text in div one</div>
            <div class="two">text in div two</div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<强> CSS：

.container{
    border:1px solid;
    width:70%;
    margin:50px;
    padding:10px;
}

.wrap1 {
    width: 25%;
    background: red;
    position: relative;
    left: 7%;
}

.wrap2 {
    width: 200%;
    position: relative;
    left: 100%;
    margin:0 -200% 0 0;
    background: blue;
}

.one{
    float: left;
    width: 50%;
    margin-right: -100%;
    position: relative;
    left: -50%;
}

.two {
}

.clear {
    clear: both;
    font-size: 0;
    overflow: hidden;
}

Div高度百分比，半父高

3 个答案: