3

これが私のjsFiddleです。私が参照している特定の CSS は、セレクターにあり.inner divます。「悪くなるか」ということは、つまり、あなたのページでそれを使用しますか? それに何か問題があると思いますか？この技に名前はありますか？これを達成するためのより良い方法はありますか？私の目標は、2 つの を左にdiv浮かせ、高さを一致させることでした。ご覧のとおり、左の水色は の下まで伸びています。#one#twosection

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>
</section>

CSS

section {
    width: 60%;
    margin: 0 auto;
    border: 1px solid red;
    border-radius: 5px;
}
#one, #two {
    float: left;
    width: 50%;
}
#one {
    background: aqua;
    padding-bottom: 1000px;
}
.clear {
    clear: both;
}

.inner {
    overflow: hidden;
}
.inner div {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
4

2 に答える 2

1

それは素晴らしいことではありません。さらに、そのテキストのサイズが変更された場合は、CSS を調整する必要があります。

代わりに、そのパディングとマージンを削除し、全体.innerの背景を水色にしますが、背景を#two白に変更します。

フィドルで変更したものは次のとおりです。

#two {
    background-color: #fff;
}

.inner {
    background: aqua;
    overflow: hidden;
    border-radius: 5px;
}

フィドル: http://jsfiddle.net/QtTeA/1/

于 2013-03-06T16:05:30.873 に答える
0

ええ、それは嫌な感じです、私はしません。個人的には

min-height:1000px /* Or whatever height */

DIVごとに、より柔軟になります。#one にコンテンツを入れた瞬間に #two よりも長くなります

于 2013-03-06T16:05:46.353 に答える