3

这是我的jsFiddle。我所指的特定 CSS 在选择器上.inner div。我的意思是“它会很糟糕”，你会在你的页面上使用它吗？你预见到它有什么问题吗？这种技术有名字吗？有没有更好的方法来实现这一点？我的目标是让两个divs 向左浮动#one并#two匹配高度，如您所见，左边的水绿色一直延伸到section.

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 回答