0

这是我的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图像具有相同的高度，但我需要一个真实的高度，因为我必须将 abc 除以百分比。例子：

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

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

4

2 回答 2

0

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

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

这只是使用 JQuery 的一种解决方案。这绝对比只使用 css 更容易。

提琴手

于 2013-10-28T16:06:19.040 回答
0

这是其中一种方法。

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

这是小提琴

首先，我们必须假设其中的所有内容都.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>

我们将使用图像来设置div#speculate的高度。.float_txt图像将visibility: hidden使其不可见，但仍占据其容器中的空间。div将.content被绝对定位并传播到.float_txtwith的整个空间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);
}
于 2013-10-29T09:48:17.120 回答