Question

我试图将div水平附加到现有div。我正在提供float:left属性并添加了overflow-x:auto。我期望父div宽度＆lt;比所有子div的宽度，然后应出现水平滚动。但它不能按预期工作。我希望所有div都在水平线上 Div1 Div2 Div1 Div2 Div1 Div2 Div1 Div2

这是代码

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

Answer 1

而不是float: left;，在内部容器上使用display: inline-block;，然后添加

white-space: nowrap;

到外部容器。

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

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

Answer 2

只需将float: left替换为display: table-cell JSFiddle - http://jsfiddle.net/5qpqakL6/

在另一个div内水平对齐div

2 个答案: