html - 水平放置 html div 的最佳方法是什么？

Question

这段代码

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

像这样显示 div。

div1
div2
div3
div3

我想像这样显示这些

  div1   div2   div3   div4

水平放置的 div 的数量不固定并且会变化，所以我无法编写定义了左填充、宽度等的 css 类。

最好的方法是什么？

Answer 1

使用 flexbox :

.container {
  display:flex;
  flex-direction:row;
}
.container > div {
  border:5px dotted black;
  background:red;
  flex-grow:1;
  padding:2em;
  text-align:center;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>  

Some prefixing may be required depending on your target audience .

Learn about all the possibilities here .