我需要简单的网格、两列和不确定的行数。是否可以用一种CSS样式来制作它?我知道如何用一个用于左列,另一个用于右列,但我真的想知道是否以及如何用一种样式完成它,因为我的想法是,当我添加另一个条目时,它会自动移动到下一个“单元格” . 例如A1的内容变成B1,B1变成A2等...
谢谢!
最佳答案
在这里使用表格是错误的。表格单元格不能放到下一行。相反,使用 float 或设置为 display: inline-block;
且宽度接近 50%
的 div。这样,当您添加更多内容时,它们将并排放置并堆叠成行。
这是一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
* {margin:0; padding: 0;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.wrap {width: 80%; overflow: hidden; background: #f7f7f7; padding: 20px; margin: 20px auto;}
.wrap div {min-height: 200px; width: 48%; display: inline-block; padding: 20px; background: #e7e7e7; margin-bottom: 5px;}
</style>
</head>
<body>
<div class="wrap">
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</body>
</html>
关于css - 如何制作具有一种样式的网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20681205/