css一行显示多个div

CSS 一行显示多个 div 的技巧

在前端开发中，我们常常需要多个 div 元素并排排列，考虑到网页的自适应性，我们需要想到 CSS 中的一些技巧。

最常用的方法就是设置每个 div 的宽度，并将它们设置为 float: left，例如：

 <div style="width: 33.33%; float: left;">1</div>
  <div style="width: 33.33%; float: left;">2</div>
  <div style="width: 33.33%; float: left;">3</div> 

这样每个 div 就占据了父元素宽度的三分之一，可以实现并排排列。

但是如果要设置许多相似的样式，就显得冗长繁琐。我们可以使用 flex 布局，只需在父元素上设置 display: flex，子元素就可以自动排列并占据相应的宽度，如下：

 <div style="display: flex;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div> 

此时，每个子元素都自动占据了相同的宽度，并且顺序排列在一起。

如果需要自定义每个子元素的宽度，可以利用 flex-grow 属性。例如，以下代码将第一个子元素的宽度设置为原来的两倍：

 <div style="display: flex;">
    <div style="flex-grow: 2;">1</div>
    <div>2</div>
    <div>3</div>
  </div> 

当然，我们也可以使用 grid 布局等其他方式实现多个 div 并排排列。在具体项目中我们可以根据实际需求选择最合适的方式。