Question

我正在尝试使用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的“正常”行为不会显示在彼此之下？

Answer 1

这是因为float: left。

选项1：

使用display:inline-block代替float:left：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

选项2 在父div中使用clearfix：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

你必须清除浮动元素

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

清除浮动

Float的姐妹财产很清楚。设置了clear属性的元素不会像浮点数一样向上移动到浮点附近，而是会自己向下移动经过浮点....

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

这样的东西？

<!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>

Answer 4

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

＆＃13;

<!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>

＆＃13;

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

4 个答案: