0

フィドル

の中に 2 つ<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 に答える