最简单的方式来使DIV彼此相邻，下方/上方对齐？

Question

我对HTML相当陌生，仍然尝试使用DIV。我最大的问题主要是对齐某些DIV /内容而不移动页面上的所有其他内容。

这是一个例子

第二个例子

在第一个屏幕截图中，您可以看到一个我选择从多个角度显示DIV“堆叠”的网站。我尝试创建一个比较难的示例，但想法有点相同（除了向下滚动箭头。只是我可以将内容彼此相邻或置于下方/上方）。在第二个屏幕截图中，您看到它们仅从上到下堆叠。如前所述：通常，一旦尝试在页面旁边添加新的div，我的内容就会在页面上移动。

例如，使4个DIV彼此相邻或以类似窗口的位置放置（示例1），并使其粘在屏幕中间的主容器上，最简单的方法是什么？

很抱歉，如果我的问题有点含糊，我的英语+术语没有那么令人惊讶。

Answer 1

也许这就是您要寻找的

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

您可以尝试使用Flexbox

import urllib2
from urllib2 import Request
from StringIO import StringIO

url = 'https://nycprop.nyc.gov/nycproperty/StatementSearch?bbl=3068690056&stmtDate=20180824&stmtType=SOA'

op = urllib2.urlopen(Request(url)).read()
memoryFile = StringIO(op)

parser = PDFParser(memoryFile)

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

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

只是添加了边框以作指示。

Answer 3

欢迎来到stackoverflow。

默认情况下，DIV是块元素，可以使用CSS属性 display：inline-block; 。

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