浮："左" vs display：“inline-block” [英] float:"left" vs display:"inline-block"

问题描述

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

我可以通过两种方法实现这一点：

方法1：

 < div id =id1style =width：100％> 
< div id =id2style =width：100px; color：＃0000FF; display：inline-block; border-color：red; border-style：solid;> 
< p>这是div1元素中的一些文字。< / p> 
< / div> 
< div id =id3style =width：100px; display：block; display：inline-block; border-color：blue; border-color：blue; border-style：solid;> 
< p>这是div2元素中的一些文字。< / p> 
< / div> 
< / div> 
  

方式2：

 < div id =id1style =width：100％> 
< div id =id2style =width：100px; color：＃0000FF; float：left; border-color：red; border-style：solid;> 
< p>这是div1元素中的一些文字。< / p> 
< / div> 
< div id =id3style =width：100px; display：block; float：left; border-color：blue; border-color：blue; border-style：solid;> 
< p>这是div2元素中的一些文字。< / p> 
< / div> 
< / div> 
  

哪种方法更好？

它是 float：left ？的显示：内联块？ 我的最终目标是让div在将来也能做出反应。这就是为什么要知道哪个更好
此外，为什么当 display：inline-block 是否被使用？

解决方案

使用内联块的一个优点是你可以在容器元素上使用`text-align：center;'进行居中对齐。

你写的空间是由于使用换行符在代码中。

I have a requirement where a I need to display two divs side by side .This is the basic requirement where I need to build on many functionalities going further.

I am able to achieve this in two approaches:

Approach 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>

Approach 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>

Which approach is the better one?

Is it float:left ? display:inline-block? My ultimate aim will be to make divs responsive as well in the future.Thats the reason wanted to know which one is better Also, why is there space created between the divs when display:inline-block is used?

解决方案

One advantage of using inline blocks is that you can center them horzontally using `text-align: center;' on the container element.

The space you write about is due to whitespace resulting from using line-breaks in the code.

这篇关于浮："左" vs display：“inline-block”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！