2

我有这个 CSS/HTML 代码：

#container {
    width:70%;
    height:100%;
    margin:120px auto 0 auto;
    padding:10px 10px 10px 10px;
    border:solid 1px #a79494;
    border-top:solid 4px #a2cd3a;
    padding-bottom:60px;   /* Height of the footer */
}
#body {
    width:70%;
    border:solid 1px #a79494;
    display:inline;
    float:left;
}
#property-search {
    width:20%;
    border:solid 1px #a79494;
    display:inline;
    float:right;
}

<div id="container">
<div id="body">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et enim sed tellus luctus varius. Ut nisl felis, volutpat id ornare at, placerat ut nisi. Cras auctor, nisi vitae interdum iaculis, magna nulla pretium quam, ac euismod quam ante at sapien. Cras mattis velit sed ante pretium non pulvinar metus molestie. Maecenas euismod bibendum nulla quis interdum. Proin venenatis pellentesque lorem quis condimentum. Vestibulum sapien sapien, convallis ut semper at, hendrerit in lorem. Curabitur cursus tempor felis eu varius.
<br /><br />
In id sem neque. Nam id convallis nisl. Duis sed venenatis erat. Sed blandit auctor imperdiet. Aliquam magna erat, pellentesque at fermentum eget, cursus at nunc. Pellentesque vestibulum feugiat aliquam. Proin cursus sapien non mauris laoreet posuere. Maecenas eleifend hendrerit suscipit. Suspendisse eleifend lacus vel arcu ultrices vulputate. Mauris mattis feugiat massa vel tincidunt. Proin ut mi non ipsum tristique pretium sit amet fermentum massa. In hac habitasse platea dictumst. Morbi dictum iaculis nibh, at vestibulum mauris placerat sit amet. Vivamus hendrerit molestie elit, nec porta libero semper a. Nullam in tellus erat, vitae sagittis nisi. Cras interdum hendrerit magna, at accumsan urna fermentum vitae.
<br /><br />
Sed eu libero non magna egestas lacinia. Suspendisse lacinia ipsum consequat metus aliquet laoreet. Quisque in eleifend diam. Aliquam orci lacus, ultrices non adipiscing nec, sollicitudin in erat. Etiam dignissim, felis non vulputate bibendum, lectus nunc congue massa, in porta tellus sapien id augue. Etiam odio ligula, iaculis vitae faucibus nec, sodales sed nunc. Phasellus eget neque massa, viverra facilisis arcu. Ut suscipit bibendum libero, eu consectetur leo rhoncus sit amet. Sed interdum risus a dolor venenatis ullamcorper ut ut quam. Curabitur eros leo, pulvinar ac vestibulum adipiscing, tempor nec augue. Cras tincidunt blandit libero, eget sollicitudin erat tempor eu. Donec eleifend posuere lectus. Donec turpis ante, sodales in luctus eget, feugiat non sapien. Donec sagittis nunc et ipsum gravida a scelerisque odio ultricies.
</div>
<div id="property-search">
SEARCH
</div> <!-- property-search -->
</div> <!-- body -->

我需要 body div 和 property-search div 位于它们所在的容器 div 内，但是当其中的子 div 较大时，带有边框的容器 div 不会扩大其高度

这里也是一个小提琴：http: //jsfiddle.net/bfSLD/1/

4

5 回答 5

2

你必须清除浮动：

<div id="container">
    <div id="container">...</div>
    <div id="body">...</div>
    <div style="clear: both;"></div>
</div>

http://jsfiddle.net/bfSLD/8/

或者更好的解决方案是使用 clearfix 类：

<div id="container" class="clearfix">
    <div id="container">...</div>
    <div id="body">...</div>
</div>

例如来自 HTML5 biolerplate 的这个：

.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

http://jsfiddle.net/bfSLD/12/

于 2013-04-17T12:22:31.790 回答
1

将以下内容添加到容器中：

display: inline-block;
于 2013-04-17T12:17:42.113 回答
1

http://jsfiddle.net/bfSLD/9/

这是你想要的achive吗？

于 2013-04-17T12:19:44.490 回答
1

尝试从#body 中删除左侧的浮动，并将显示设置为inline-block（也在#body 上）。

于 2013-04-17T12:21:59.117 回答
0

这是你要找的吗？

#container {
width:70%;
margin:120px auto 0 auto;
padding:10px 10px 10px 10px;
border:solid 1px #a79494;
border-top:solid 4px #a2cd3a;
padding-bottom:60px;   /* Height of the footer */
position:absolute;
}
#body {
width:70%;
border:solid 1px #a79494;
display:inline;
float:left;
}
#property-search {
width:20%;
border:solid 1px #a79494;
display:inline;
float:right;
}
于 2013-04-17T12:39:21.370 回答