css - 如何制作具有一种样式的网格?

标签 css grid

我需要简单的网格、两列和不确定的行数。是否可以用一种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/

相关文章:

python-3.x - map 绘图网格问题

javascript - Kendo MVC 网格集选择模式以编程方式

javascript - 已设置 autoHeight 时,Ext js 问题动态设置网格的高度

javascript - 在 div 容器中显示错误消息以使用 Jquery 进行验证

javascript - 如何在没有关闭功能的主窗口上方自动覆盖加载?

css - 字形图标不起作用

html - Bootstrap grid,get less than col -xx-1

html - 如何在 HTML 或 CSS 中的背景 jpg 上创建透明链接?

html - 制作像素化的边界半径

css - Web 应用程序网格的样式