HTML 布局 - 显示 : inline-block instead of float not working

Question

抱歉标题不好，我想不出更具描述性的东西...

我有四种类型的内容，每一种都在一个单独的 div 中，如下所示:

<div id="item1">
  some content
</div>
<div id="item2">
  some content
</div>
<div id="item3">
  some content
</div>
<div id="item4">
  some content
</div>

我想将它们放置在第一行，#item1 和#item2 彼此相邻，第二行#item3 和#item4 彼此相邻(一起形成一个正方形)。

我知道如何用 float 来做到这一点:

#item1, #item3 {
  float: right;
}

但是我们的老师希望我们为这个网站使用“display: inline-block”。我试图找到并回答，但我唯一能想到的就是将元素分成两套:

<div id="content1">
  <div id="item1">
    some content
  </div>
  <div id="item2">
    some content
  </div>
</div>

<div id="content2">
  <div id="item3">
    some content
  </div>
  <div id="item4">
    some content
  </div>
</div>

  #item1, #item2 {
    display: inline-block;
  }

  #item3, #item4 {
    display: inline-block;
  }

这不是一个选项，因为我需要能够通过使用媒体查询单独移动元素:/例如在主页上的一个单独方向上 float #item1，而#item2 移动到其他地方，我希望你明白我的意思。

编辑 为了清楚起见，我希望“柠檬”位于“苹果”下方:https://jsfiddle.net/1hj3L018/1/

Answer 1

您可以使用 display: inline-block 但您应该注意这会导致的空白问题。 Here is some info on that .

下面的代码应该可以达到你想要的结果

div {
  display: inline-block;
  width: 50%;
}

<div id="item1">
  item 1
</div><div id="item2">
  item 2
</div><div id="item3">
  item 3
</div><div id="item4">
  item 4
</div>