最简单的方法是将DIV对齐在下方和下方/上方？

Question

我是HTML的新手，仍然在尝试使用DIV。我最大的问题主要是调整某些DIV /内容而不转移页面上的所有其他内容。

这是一个例子

第二个例子

在第一个屏幕截图中，您可以看到我选择从多个方面显示DIV“堆叠”的网站。这是我尝试创建的一个更难的例子，但是这个想法有点相同（除了向下箭头。只是我可以将内容放在彼此旁边或彼此之下/之上）。在第二个屏幕截图中，您看到它们仅从上到下堆叠。正如前面提到的那样：一旦我尝试在它旁边添加一个新的div，我通常会让我的内容在页面周围移动。

例如，最简单的方法是将4个DIV彼此相邻或者在类似窗口的位置（示例1）中获取，并使其例如粘贴到屏幕中间的主容器中？

如果我的问题有点含糊，我很抱歉，我的英语+术语并不那么神奇。

Answer 1

您可以尝试使用flexbox

.container{
  display: flex;
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap;
}

.square{
  width: 50%;
  height:80px;
  border: 1px solid black;
  box-sizing: border-box;
}

<div class="container">

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

</div>

边框仅用于指示。

Answer 2

也许这就是你要找的东西

.container {
  width: 80%;
  margin: auto;
}

.square1 {
  background-color: red;
  width: 50%;
  float: left
}

.square2 {
  background-color: blue;
  width: 50%;
  float: right;
}

.square3 {
  background-color: yellow;
  width: 50%;
  float: left
}

.square4 {
  background-color: orange;
  width: 50%;
  float: right;
}

<div class="container">
  <div class="square1">
    Something
  </div>

  <div class="square2">
    Something
  </div>

  <div class="square3">
    Something
  </div>

  <div class="square4">
    Something
  </div>
</div>

Answer 3

欢迎来到stackoverflow。

默认情况下，DIV是块元素，要并排排列它们可以使用CSS属性显示：inline-block;。

您可以在this page上找到有关display css属性的更多详细信息。