2格浮動但高度相同

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中設置與圖像相同的高度，但是我需要一個REAL高度，因為我必須將abc除以百分比。 例：

.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絕對容易。

傑斯菲德爾

Answer 2

這是方法之一。

我不認為這是答案既不是一個完美的解決方案，但這實際上滿足了最重要的條件的解決方法之一-它的工作原理（有一些限制）。

這是小提琴

首先 ，我們必須假設.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將絕對定位，並以top:0; right:0; bottom:0; left:0傳播到.float_txt的整個空間top:0; right:0; bottom:0; left:0 top:0; right:0; bottom:0; left:0 top:0; right:0; bottom:0; left:0 。
段落也將絕對放置在top屬性中。 這里的缺點是這樣一個事實，我們必須知道前面幾段的高度百分比，例如，為了放置第二段，我們必須將top: 20%設置為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);
}