2 div漂浮但高度相同

Question

这是我的HTML

<div class="container"> 
    <div class="box">
        <div class="float">
            <img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
        </div>
        <div class="float float_txt">
            text here!
        <p class"a_p">a</p>
        <p class"b_p">b</p>
        <p class"c_p">c</p>
        </div>
    </div>
</div>

和css

.container{width:400px}
.box{display:inline-block}
.float{width:50%; float:left}
.float img{width: 100%; height:auto;}
.float_txt{background:red}

http://jsfiddle.net/MdtR8/1/

.container具有动态宽度（响应式设计），图像会自动调整大小。

我需要.float_txt与图像处于同一高度，但我需要一个真正的高度，因为我必须以百分比划分b c。例如：

.a_p, .b_p{height: 20%}
.c_p{height:60%}

我怎么能这样？只有css没有js：S

Answer 1

为什么不用JQuery来解决它。以下是JQuery计算.float img高度并将其添加到float_txt高度的示例。

$(".float_txt").css({
    'height': $('.float img').height()
});

这只是一个使用JQuery的解决方案。它比仅使用css更容易。

Jsfiddle

Answer 2

这是其中一种方法。

我不认为 回答既不是一个优雅的解决方案，但这是实际满足最重要条件的解决方法之一 - 它有效（有一些限制）。

的 Here's the fiddle

首先，我们必须假设.float_txt内的所有内容都将包含在这三段中 - 它们的意思是 20％， 20％和 60％ 100％，所以没有更多空间可供任何其他元素使用。 下一步，我们用div包装所有三个段落，并在此div旁边放置一个图像副本。我们会将id="speculate"添加到图片中 整个HTML看起来像这样：

<div class="container"> 
    <div class="box">
        <div class="float">
            <img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
        </div><div class="float float_txt">
            <img id='speculate' src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
            <div class='content'>
                <p class="a-p">a</p>
                <p class="b-p">b</p>
                <p class="c-p">c</p>
            </div>
        </div>
    </div>
</div>

我们将使用#speculate图片来设置.float_txt div的高度。图像将具有visibility: hidden，这使其不可见，但仍然占据 _容器中的空间。 .content div将被绝对定位并通过.float_txt传播到top:0; right:0; bottom:0; left:0的整个空间。
这些段落也将被绝对定位并放置在top属性中。这里的缺点是我们必须知道前面段落的百分比高度，例如：要定位第二段，我们必须设置top: 20%，因为第一段有height: 20%。我希望它很清楚。

整个CSS看起来像这样：

.box {
    display: inline-block;
}
.float {
    display: inline-block;
    width:50%;
}
.float img {
    width: 100%;
    height: auto;
}
.float_txt {
    background: red;
    position: relative;
}

#speculate {
    width: 100%;
    visibility: hidden;
    display: block;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.content p {
    margin: 0;
    position: absolute;
}
.content .static {
    position: static;
}
.a-p {
    height: calc(20% + 20px);
    top: 20px;
}
.b-p {
    height: 20%;
    top: calc(20% + 20px);
}
.c-p {
    height: 60%;
    top: calc(40% + 20px);
}