Question

我有一个要求，我需要并排显示两个div。这是我需要建立的基本要求许多功能都在进一步发展。

我能够通过两种方法实现这一目标：

方法1：

<div id="id1" style="width:100%">
  <div id="id2" style="width:100px;color:#0000FF;display:inline-block;border-color: red;border-style: solid;">
  <p>This is some text in a div1 element.</p>
  </div>
  <div id="id3" style="width:100px;display:block;display:inline-block;border-color:blue;border-color: blue;border-style: solid;">
  <p>This is some text in a div2 element.</p>
  </div>
</div>

方法2：

<div id="id1" style="width:100%">
  <div id="id2" style="width:100px;color:#0000FF;float:left;border-color: red;border-style: solid;">
  <p>This is some text in a div1 element.</p>
  </div>
  <div id="id3" style="width:100px;display:block;float:left;border-color:blue;border-color: blue;border-style: solid;">
  <p>This is some text in a div2 element.</p>
  </div>
</div>

哪种方法更好？

浮动：左？的显示：内联块？ 我的最终目标是让div在未来做出回应。这就是为什么想知道哪一个更好 另外，为什么在使用display:inline-block时div之间会产生空格？

Answer 1

使用内联块的一个优点是，您可以使用`text-align：center;＆＃39;进行水平居中。在容器元素上。

您撰写的空间是由于在代码中使用换行符导致的空格。

float：“left”vs display：“inline-block”

1 个答案: