我是 CSS 新手，我在使用 div 时遇到了一些问题。我不太确定如何正确表达我的问题，而且我不熟悉所使用的很多术语，所以我很难找到问题的答案。
基本上，我的目标是拥有一个容器，其中包含多个不同大小(160x160px、320x320px 和 160x320px)的方形或矩形 div，以便它们可以显示在响应式网格中。
我遇到的问题是，有时较大的 div 会“推”离它们的东西；例如，较小的 div 不会出现在 320x320 div 类的下半部分的左侧。
我写的CSS看起来像这样；
body{
max-width: 1280px;
background-color: #333333;
}
div{
border: 1px solid #333333;
height: 158px;
width: 158px;
float: left;
text-align: center;
background-color: #cc00ff;
display: block;
float: left;
vertical-align: text-bottom;
}
.extra{
height: 158px;
width: 318px;
background-color: #ccff00;
}
.feature{
height: 318px;
width: 318px;
background-color: orange;
}
我在下面粘贴的 HTML 中链接了大约 20 个 div，其中一些带有 div 的类。
<head>
<link type="text/css" rel="stylesheet" href="new1.css"/>
<title></title>
</head>
<body>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div class="feature">Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div>Article Title</div>
<div class="extra">Article Title</div>
</body>
</html>
A screenshot to illustrate what I'm talking about
如果我的措辞奇怪，我再次道歉，非常感谢您提供的任何建议或链接到可以回答我的问题的适当线程。
最佳答案
在这个例子中，你得到了一些设计如何制作它的提示。这不完全是您的解决方案，但这里您已经找到了关键点。
<head>
<title></title>
<style>
.row1
{
height:50px;
width:100px;
background-color:green;
float:left;
position:relative;
border:1px solid black;
}
</style>
</head>
<body>
<div>
<div class="row1">Article Title</div>
<div class="row1">Article Title</div>
<div class="row1">Article Title</div>
<div class="row1">Article Title</div>
<div class="row1">Article Title</div>
<div class="row1">Article Title</div>
<div class="row1">Article Title</div>
<div class="row1">Article Title</div>
</div>
</body>
</html>
结果:-
关于css - 让 CSS div 向左显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33050335/