好的，这是我们想要的结果:
这是我得到的结果:
底部的一行是一条直线，而不是像它需要的那样进入其他容器之间。我不知道如何获得我想要的结果，如屏幕截图 #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>最佳答案
该布局称为Masonry Grid。它可以使用 CSS 网格列来实现，但这是一项相当困惑的任务，我建议您使用像 this one 这样的 jQuery 插件。 .
希望这有帮助:)
关于html - 我在这里做错了什么？ html 和 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43163092/