2
好这里是理想的结果：我在这里做错了什么？ HTML和CSS
这是我得到的结果是：
最下面一行是在一条直线之间，不会去其他容器就像它需要它一样。我不知道如何在屏幕截图＃1中获得我想要的结果。
我希望有人能帮助我。提前致谢。
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
background-color: #f2f2f2;
font-family: 'Roboto', sans-serif;
}
h2 {
font-size: 22px;
font-weight: 300;
padding-top: 7px;
}
.container {
width: 948px;
height: auto;
margin: 0 auto;
overflow: hidden;
padding-top: 70px;
padding-bottom: 50px;
}
.container ul {
width: 100%;
height: auto;
list-style-type: none;
}
.container ul li {
float: left;
width: 300px;
height: auto;
padding: 10px;
margin-right: 24px;
border-radius: 6px;
display: inline-block;
background-color: #fff;
}
.container ul li:nth-child(3n) {
margin: 0;
}
.container ul li span {
font-size: 13px;
padding-bottom: 7px;
text-decoration: underline;
}
.container ul li p {
color: #333;
text-align: justify;
padding-bottom: 15px;
}
.thumbnail-con {
width: 100%;
height: 174px;
border-radius: 3px;
background-color: #f2f2f2;
}<!DOCTYPE html>
<html>
<head>
<title>SimpleRead</title>
<link rel="stylesheet" type="text/css"href="styles/main.css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="thumbnail-con"></div>
<br>
<span>Business</span>
<h2>Caterpillar to close Illinois plant, lay off 800 workers</h2>
<br>
</li>
<li>
<div class="thumbnail-con"></div>
<br>
<span>Celebrity</span>
<h2>Nicki Minaj signs with modeling agency</h2>
<br>
<p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
</li>
<li>
<div class="thumbnail-con"></div>
<br>
<span>US</span>
<h2>Racist ‘assassin’ indicted as terrorist in NYC murder of black man</h2>
<br>
<p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
</li>
<li>
<div class="thumbnail-con"></div>
<br>
<span>US</span>
<h2>Racist ‘assassin’ indicted as terrorist in NYC murder of black man</h2>
<br>
<p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
</li>
<li>
<div class="thumbnail-con"></div>
<br>
<span>US</span>
<h2>Racist ‘assassin’ indicted as terrorist in NYC murder of black man</h2>
<br>
<p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
</li>
<li>
<div class="thumbnail-con"></div>
<br>
<span>US</span>
<h2>Racist ‘assassin’ indicted as terrorist in NYC murder of black man</h2>
<br>
<p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
</li>
</ul>
</div>
</body>
</html>
没有水晶球可用..尝试添加相关的HTML/CSS/JS –
对，我完全忘了笑 –
你可以使用列，但随后他们会去上/下，然后离开/所以第二个会低于第一等..否则，你需要使用一些JavaScript。 [masonry]（http://masonry.desandro.com/）似乎是一个很好的候选人。 –