高效的方法来并排对齐div？ [英] efficient way to align divs side by side?

问题描述

并排排列3，4或甚至5个div的最佳方法是什么？在它们之间具有将它们分开的空间。

我试过谷歌搜索，但似乎有这么多不同的答案，只是似乎太用例依赖（即如果它的2 divs或3 divs等）

感谢

解决方案

这里给出的所有答案都很好，他们是有效的方法。

<$ p $

p> < div id =apnd>
< div>一个< / div>
< div>两个< / div>
< div> Three< / div>
< div>四< / div>
< div> Five< / div>
< div>六< / div>
< div> Seven< / div>
< div>九个< / div>
< div> Ten< / div>
< div>十一< / div>
< / div>


CSS：

  #apnd div {
 height：100px; 
 width：100px; 
 border：1px solid red; 
 margin-left：5px; 
 float：left; / *在这里你还可以使用display：inline-block而不是float：left * / 
 background：orange; 
} 
  

Whats the best way to align 3, 4 or even 5 divs side by side? with a space in between each one separating them apart.

I have tried googling this but there seems to be so many different answers out there that just seem too use case dependent (i.e if its for 2 divs or 3 divs etc) im asking whats the best way to do this for any number of divs?

Thanks

解决方案

All answers given here are excellent and they are the efficient way. But I tried to make them easier for you.

HTML:

<div id="apnd">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
</div>

CSS:

#apnd div { 
        height: 100px; 
        width: 100px; 
        border: 1px solid red; 
        margin-left: 5px; 
        float: left; /*Here you can also use display: inline-block instead of float:left*/
        background: orange; 
}

这篇关于高效的方法来并排对齐div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！