在下面的HTML页面中（也在http://pastehtml.com/view/axetf58is.html提供）粉红色方框上方页面上半部分中的一个浅蓝色框已经用完，因为有一些额外的文字而留下了很多空间第一个方框。实际和预期的页面布局位于：http://pastehtml.com/view/axetwro10.html如何确保所有框都正确放置在网格中。
以下是来自第一个链接的HTML标记，它给我带来了问题。
<html>
<head>
<title>Page 7</title>
<style type="text/css">
body {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#header {
height: 200px;
margin: 2px;
margin-bottom: 10px;
font-family: Arial,Helvetica,sans-serif;
font-size: XX-large;
}
#first_half {
min-width: 500px;
min-height: 500px;
margin-bottom: 20px;
overflow: hidden;
}
#first_half div.summaries_box {
float: left;
margin-right: 10px
}
#para_right {
float: right;
width: 350px;
background-color: gray;
}
#second_half {
clear: both;
}
#second_half div.summaries_box {
float: left;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
div.summary {
width: 260px;
margin: 5px;
float: left;
background: lightblue;
}
h3.summary_header {
font-weight: bold;
font-variant: small-caps;
}
#snippets_horizontal {
width: 90%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#snippets_horizontal .snippet {
float: left;
width: 45%;
margin-right: 5%;
font-size: small;
background-color: lightpink;
}
</style>
</head>
<body>
<div id="header">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="first_half">
<div class="summaries_box" style="width: 600px;">
<div class="summary">
<h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
<ul class="summary_list">
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
</ul>
</div>
<div class="summary">
<h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
<ul class="summary_list">
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
</ul>
</div>
<div class="summary">
<h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
<ul class="summary_list">
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
</ul>
</div>
<div class="summary">
<h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
<ul class="summary_list">
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
</ul>
</div>
</div>
<div id="para_right" class="para">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="second_half">
<div id="snippets_horizontal">
<div class ="snippet">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
</div>
<div class ="snippet">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
<div class="summaries_box" style="clear: both;">
<div class="summary">
<h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
<ul class="summary_list">
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
</ul>
</div>
<div class="summary">
<h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
<ul class="summary_list">
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
</ul>
</div>
<div class="summary">
<h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
<ul class="summary_list">
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
<li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
给它一个固定的高度，并告诉浏览器在内容太多时引入滚动条。
div.summary {
height: 200px;
overflow: auto;
}
由于浮动的特性，您的布局会中断。在这种情况下，Box 3将尝试将自己漂浮到最早的适合位置，并且因为Box 1高于Box 2，所以它旁边会有一些自由空间。方框3试图占据这一点，没有为Box 4留下足够的空间（我认为是Box 3），所以它会落到下一行。您还可以尝试清除Box 3上的浮动，因此它将始终转到下一行（取决于布局的固定程度，这也可能是一个很好的解决方案）。
答案 1 :(得分：0)
如果您不希望使用overflow: auto作为kapa建议的固定高度，则可以使用display: inline-block和垂直对齐属性。
链接：Why You Should Use Inline-Block when Positioning Elements