Question

我想水平添加磁贴，直到水平有可用空间为止。然后它将自动到达第二行/第二行。

它还应该响应屏幕的不同大小。我的初始代码如下：

.tile {
  width: 248px;
  height: 126px;
  background-color: #e4e4e4;
  margin: 17px;
}

.title {
  display: block;
  float: left;
  padding-left: 13px;
  font-size: 20px;
  padding-top: 8px;
}

<div class="tile">
  <label class="title">Tile1</label>
</div>
<div class="tile">
  <label class="title">Tile2</label>
</div>
<div class="tile">
  <label class="title">Tile3</label>
</div>
<div class="tile">
  <label class="title">Tile4</label>
</div>
<div class="tile">
  <label class="title">Tile5</label>
</div>
<div class="tile">
  <label class="title">Tile6</label>
</div>
<div class="tile">
  <label class="title">Tile7</label>
</div>
<div class="tile">
  <label class="title">Tile8</label>
</div>
<div class="tile">
  <label class="title">Tile9</label>
</div>

我希望在第一行中平铺1,2,3，然后在第二行中平铺4,5,6，依此类推，以响应的方式进行。（仅是示例，一行中的瓦片数应自动调整为页面宽度（瓦片大小固定））。

如何实现此目的（不使用JavaScript）？

Answer 1

css文件

.flex{
  display:flex;
  justify-content: space-around;
align-items:center;
  flex-flow: row wrap;
}

html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="flex">
<div class="tile">
  <label class="title">Tile1</label>
</div>
<div class="tile">
  <label class="title">Tile2</label>
</div>
<div class="tile">
  <label class="title">Tile3</label>
</div>
<div class="tile">
  <label class="title">Tile4</label>
</div>
<div class="tile">
  <label class="title">Tile5</label>
</div>
<div class="tile">
  <label class="title">Tile6</label>
</div>
<div class="tile">
  <label class="title">Tile7</label>
</div>
<div class="tile">
  <label class="title">Tile8</label>
</div>
<div class="tile">
  <label class="title">Tile9</label>
</div>
  </div>
</body>
</html>

使用此CSS，它将根据您增加的宽度做出响应，并添加额外的"<div class="flex"></div>"，请注意这一点...

Answer 2

您可以通过使用CSS中的 flex-wrap 属性来实现此目的，即使您调整浏览器窗口的大小（响应），该属性也可以如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: green;
}

.flex-container > div {
  background-color: #e4e4e4;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div>Tile 1</div>
  <div>Tile 2</div>
  <div>Tile 3</div>  
  <div>Tile 4</div>
  <div>Tile 5</div>
  <div>Tile 6</div>  
  <div>Tile 7</div>
  <div>Tile 8</div>
  <div>Tile 9</div>  
  <div>Tile 10</div>
  <div>Tile 11</div>
  <div>Tile 12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

如何水平添加div直到宽度超过尺寸？

2 个答案: