0

小提琴

我有两个<div>s 漂浮在一个<section>. 我正在寻找最简单的方法来获得<div>较短的那个，在这种情况下<div id="one">拉伸它的高度以匹配另一个（<div id="two">）。在小提琴中，你会看到<div id="one">有一个灰色背景，我想继续向下到<section>. 任何解决方法或任何完成此操作的方法都很棒。但我不想使用 javascript 来做到这一点。谢谢。

HTML：

<section>
    <div id="one"><p>Lorem</p></div>
    <div id="two">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore</p>
    </div>
    <div class="clear"></div>
</section>

CSS：

section {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#one, #two {
    float: left;
    width: 50%;
}
#one {
    background: rgb(230,230,230);
}
.clear {
    clear: both;
}
4

3 回答 3

1

加载 jquery 并添加以下 javascript

$(document).ready( function() {
    var x = $("#one").css('height');
    var y = $("#two").css('height');

    if(x > y) {
        $("#two").css('height', x);
    } else {
        $("#one").css('height', y);
    }
});

但是如果你对 JavaScript 过敏......并且会接受 CSS3，你可以试试

section {
    display: flex;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#one, #two {
    display: flex;
    width: 50%;
    display: table-cell;
}
于 2013-02-28T21:01:42.307 回答
0

这是为您提供的纯 HTML 和 CSS 解决方案。它使用具有“内部”类的 div 来包装您想要匹配的 div。还添加了一些 CSS 以使其表现得像您想要的那样。

jsFiddle 解决方案——纯 HTML 和 CSS

HTML 代码：

<section>
<div class="inner">
    <div id="one">
        <p>Lorem</p>
    </div>
    <div id="two">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
            veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
            consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
            porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
            adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore</p>
    </div>
</div>
<div class="clear"></div>

于 2013-03-01T06:37:34.103 回答
-1

您可以修改 #one div 中 p 上的填充，但这会在此 div 中丢弃您的文本。我不确定它与对齐其他文本有多相关，但它可能会对您有所帮助。

#one p {
padding: 9em;

}

于 2013-02-28T21:06:34.323 回答