在另一个 div 内水平对齐 div答案

【问题标题】：align divs horizontally inside another div在另一个 div 内水平对齐 div
【发布时间】：2015-07-30 08:08:10
【问题描述】：

我正在尝试将 div 水平附加到现有 div。我给了float:left 属性并添加了overflow-x:auto。我希望父 div 宽度

这里是代码

<div style="overflow-x:auto;width:100px;height:100px">     
    <div style="background-color:lavender;float:left">
      Div1       
    </div>
    <div  style="background-color:lavenderblush;float:left">
          Div2
    </div>
     <div style="background-color:lavender;float:left">
      Div1       
    </div>
    <div  style="background-color:lavenderblush;float:left">
          Div2
    </div>
     <div style="background-color:lavender;float:left">
      Div1       
    </div>
    <div  style="background-color:lavenderblush;float:left">
          Div2
    </div>
</div>

【问题讨论】：

标签： html

【解决方案1】：

代替float: left;，在内容器上使用display: inline-block;，然后添加

white-space: nowrap;

到外部容器。

https://jsfiddle.net/9c1mrcoe/3/

编辑：在小提琴中，我现在已经清理了所有内联样式并改用 css 类。

【讨论】：

【解决方案2】：

只需用这个替换那些float: left - display: table-cell
JSFiddle - http://jsfiddle.net/5qpqakL6/

【讨论】：