如何使用 CSS 开始一行新的正方形数组

我正在尝试使用CSS创建一个正方形的"网格"。到目前为止，我已经尝试过：

.square {
  display: block;
  float: left;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  margin: 30px;
}

<div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
<div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

但是，这仅连续显示 6 个正方形。但是，我想有两排，每排 3 个正方形。为什么包罗万象的div没有它们彼此下方显示的"正常"行为？

你必须清除浮动元素

https://css-tricks.com/all-about-floats/

清除浮点数

Float的姐妹财产很清楚。设置了 clear 属性的元素不会像浮点所希望的那样在浮点数附近向上移动，而是会向下移动到浮点数之外。

.square {
  display: block;
  float: left;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  margin: 30px;
}
body>div {overflow:hidden;}

<div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
<div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

这是因为float: left.

选项 1：

使用display:inline-block而不是float:left：

.square {
    display: inline-block;
    border: 1px solid black;
    width: 50px;
    height: 50px;
    margin: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>

选项 2在父div 中使用 clearfix：

.square {
    display: block;
    float: left;
    border: 1px solid black;
    width: 50px;
    height: 50px;
    margin: 30px;
}
.parent{
   	clear: both;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>

像这样的东西？

<!DOCTYPE html>
<html>
<head>
<style>
.square-wrapper {
width: 276px;
}
.square {
    display: inline-block;
    float: left;
    border: 1px solid black;
    width: 30px;
    height: 50px;
    margin: 30px;
}
</style>
</head>
<body>
<div class="square-wrapper">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div class="square-wrapper">
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
</div>
</body>
</html>

您可以将块放置在具有固定宽度的包含div 内。这将强制块堆叠给定其显示类型。例如，将容器的宽度设置为 400px 可以为连续三个块提供足够的空间。框架使用的系统对于创建均匀分布在整个容器中的网格非常有用。

<!DOCTYPE html>
<html>
<head>
<style>
.square {
    display: block;
    float: left;
    border: 1px solid black;
    width: 50px;
    height: 50px;
    margin: 30px;
  }
.container {
    width:400px;   
  }
</style>
</head>
<body>
<!-- Place all of your blocks in a single container -->
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<!-- The container is not large enough to display all of the blocks in one row -->
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：