html - 如何风格化 3 个 div 以相对适合 100% 窗口大小

Question

我在将 div 相对放置时遇到问题。我将它们排成一行 3 个，每列放置 3 个(第一列是 140px，第二列是 320px，第三列是 500px 来自 left) 在 100% 窗口大小中通过像素格式相互关联，但需要滚动才能在任何其他窗口大小中查看它们。我希望它随着窗口大小的变化而相应地安排自己。我写的代码给出如下

#box1 {
  color: white;
  background-color: #ac536f;
  position: relative;
  display: inline-block;
  width: 210px;
  height: 162px;
  left: 140px;
}

#box2 {
  color: white;
  background-color: #ac536f;
  position: relative;
  display: inline-block;
  width: 210px;
  height: 162px;
  left: 320px;
}

#box3 {
  color: white;
  background-color: #ac536f;
  position: relative;
  display: inline-block;
  width: 210px;
  height: 162px;
  left: 500px;
}

<div id="box1">
  <a href="https://www.youtube.com/watch?v=OUksMAlXQ9w"><img src="thumbnail1.jpg" />DIV1</a>
</div>
<div id="box2">
  <a href="https://www.youtube.com/watch?v=5hEMAPoW3B8"><img src="thumbnail2.jpg" />DIV2</a>
</div>
<div id="box3">
  <a href="https://www.youtube.com/watch?v=iINlkySuCDI"><img src="thumbnail3.jpg" />DIV3</a>
</div>
<br/><br/>
<div id="box1">
  <a href="https://www.youtube.com/watch?v=zXB5jeceKic"><img src="thumbnail4.jpg" />DIV4</a>
</div>
<div id="box2">
  <a href="https://www.youtube.com/watch?v=tK4pTRySWCM"><img src="thumbnail5.jpg" />DIV5</a>
</div>
<div id="box3">
  <a href="https://www.youtube.com/watch?v=tdH68x36Vxc"><img src="thumbnail6.png" />DIV6</a>
</div>
<br/><br/>
<div id="box1">
  <a href="https://www.youtube.com/watch?v=_al3HCUNrKo"><img src="thumbnail7.jpeg" />DIV7</a>
</div>
<div id="box2">
  <a href="https://www.youtube.com/watch?v=ua5rZXKj4q0&t=27s"><img src="thumbnail8.png" />DIV8</a>
</div>
<div id="box3">
  <a href="https://www.youtube.com/watch?v=M6PgE_igVz8"><img src="thumbnail9.png" />DIV9</a>
</div>
<br/><br/>

Answer 1

• 您应该继续阅读 flex-box . flex-box 为您进行布局并整理出任何类型的包装。
• 永远不要使用 <br/>如果你想做页面响应。让 CSS 处理任何行换行。
• 使用 id仅适用于独特的对象。如果您想将相同的 CSS 应用于多个元素，请改用 CSS 类。

我将方框设为 60x60 像素，以便更容易在较小的设备上显示包装。

.box-container {
  display: flex;
  flex-wrap: wrap;
}

a.box {
  width: 60px;
  height: 60px;
  margin-left: 140px;
  margin-bottom: 20px;
  color: white;
  background-color: #ac536f;
}

<div class="box-container">
  <a class="box" href="https://www.youtube.com/watch?v=OUksMAlXQ9w"><img src="thumbnail1.jpg" />DIV1</a>
  <a class="box" href="https://www.youtube.com/watch?v=5hEMAPoW3B8"><img src="thumbnail2.jpg" />DIV2</a>
  <a class="box" href="https://www.youtube.com/watch?v=iINlkySuCDI"><img src="thumbnail3.jpg" />DIV3</a>
  <a class="box" href="https://www.youtube.com/watch?v=zXB5jeceKic"><img src="thumbnail4.jpg" />DIV4</a>
  <a class="box" href="https://www.youtube.com/watch?v=tK4pTRySWCM"><img src="thumbnail5.jpg" />DIV5</a>
  <a class="box" href="https://www.youtube.com/watch?v=tdH68x36Vxc"><img src="thumbnail6.png" />DIV6</a>
  <a class="box" href="https://www.youtube.com/watch?v=_al3HCUNrKo"><img src="thumbnail7.jpeg" />DIV7</a>
  <a class="box" href="https://www.youtube.com/watch?v=ua5rZXKj4q0&t=27s"><img src="thumbnail8.png" />DIV8</a>
  <a class="box" href="https://www.youtube.com/watch?v=M6PgE_igVz8"><img src="thumbnail9.png" />DIV9</a>
</div>