Question

我需要简单的网格，两列和无限数量的行。是否可以使用一种CSS风格？我知道如何使用一个用于左列而另一个用于右列，但我真的想知道是否以及如何用一种风格完成它的想法是当我添加另一个条目时它会自动移动到下一个“单元格” 。例如，A1的内容变为B1，B1变为A2等......

TNX！

Answer 1

在这里使用表是错误的。表格单元格不能下降到下一行。相反，请使用浮动或设置为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>

如何制作一种风格的网格？

1 个答案: