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＆amp; ＃item2在第一行彼此相邻，＃item3＆amp; ＃item4在第二行彼此相邻（一起形成一个正方形）。

我知道如何用浮动来做到这一点：

#item1, #item3 {
  float: right;
}

但我们的老师希望我们使用＆＃34; display：inline-block＆＃34;对于这个网站。我试图找到并回答，但我能想出的唯一一件事就是将这些物品分成两组：

<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;
  }

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

编辑要清除我想要＆＃34;柠檬＆＃34;在＆＃34; apple＆＃34;：https://jsfiddle.net/1hj3L018/1/

之下

Answer 1

你可以使用display: inline-block，但是你应该知道这导致的空白问题。 Here is some info on that

以下代码应达到您所寻求的结果

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用内联块和宽度的百分比：

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

这应该使item1和item2跨越第一行，item3和item4跨越第二行。

编辑：那就是如果你真的把它们紧挨着彼此，两者之间没有任何空格。有几种方法可以做到这一点（见Ryan的回答）。如果你想在这里保留你的格式是另一个技巧：

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

这是有效的，因为现在解析器会将结束标记和结束标记之间的所有内容视为HTML注释而不是空白

HTML布局 - 显示：内联块而不是浮点不起作用

2 个答案: