Question

HTML

<div id="outer_div" style="overflow:auto; width:1238px; height:310px;">
 <div id="inner_div" style="height:300px;">
   <div id="child1" style="width:400px;">
   </div>
   <div id="child2" style="width:400px;">
   </div>
   <div id="child3" style="width:300px;">
   </div>
   <div id="child4" style="width:500px;">
   </div>
   <div id="child5" style="width:300px;">
   </div>
   <div id="child6" style="width:600px;">
   </div>
 </div>
</div>

我想要的是inner_div的宽度超出outer_div且子div将保持在同一行。我通过使用jquery prepend和append方法将子div添加到inner_div。目前，最大宽度inner_div的宽度为outer_div，然后换行。

我在display:inline-block上使用overflow:auto;，width:auto和inner_div进行了尝试，但它无效。

目前我通过动态地向inner_div添加宽度来使用jquery来工作，因为我正在动态地将子div添加到inner_div中。如果可能的话，我想用css实现它。

Answer 1

使用table和table-cell属性来实现此目标。

#inner_div{display:table;}
#inner_div div{display:table-cell;}

DEMO

Answer 2

你应该在inner_div上使用min-width，在inner_div的子节点上使用float（或display：inline-block）。或者在inner_div上使用position absoulote：

<div id="outer_div" style="min-width:1238px; height:310px">
 <div id="inner_div" style="height:300px;">
   <div id="child1" style="width:400px;display:inline-block">
   </div>
   <div id="child2" style="width:400px;display:inline-block">
   </div>
   <div id="child3" style="width:300px;display:inline-block">
   </div>
   <div id="child4" style="width:500px;display:inline-block">
   </div>
   <div id="child5" style="width:300px;display:inline-block">
   </div>
   <div id="child6" style="width:600px;display:inline-block">
   </div>
 </div>
</div>

或者如果你想要固定宽度的outer_div，你可以使用position：

<div id="outer_div" style="width:1238px; height:310px;position:relative;white-space: nowrap;">
 <div id="inner_div" style="height:300px;position:absolute; top:0 ">
   <div id="child1" style="width:400px;display:inline-block">
   </div>
   <div id="child2" style="width:400px;display:inline-block">
   </div>
   <div id="child3" style="width:300px;display:inline-block">
   </div>
   <div id="child4" style="width:500px;display:inline-block">
   </div>
   <div id="child5" style="width:300px;display:inline-block">
   </div>
   <div id="child6" style="width:600px;display:inline-block">
   </div>
 </div>
</div>

通过显示表，inner_div的宽度不能大于1238！另外，我想，你不能用css添加新元素！

如何在添加子元素时自动调整div的宽度

2 个答案: