Question

这个问题听起来很复杂，但这里有HTML来说明它：

<div id="contained" style="overflow: hidden">
 <div id="float-right" style="float: right; width: 100px">floated-right</div>
 <div id="float-left" style="float: left; width: 200px">floated-left</div>

 <div style="clear: both"></div>
</div>

如果我将#contained的大小调整为小于300px，则#float-left会在其下方跳跃并且不再可见。

问题是：如果我将#float-left调整为小于#contained，如何防止300px消失？如果#float-right小于#float-left，如何将#contained和300px“粘在一起”？

Answer 1

当容器#float-left的大小调整为小于#contained - 并且具有300px <时，无法阻止overflow:hidden消失em>和固定高度（大概） - 因为#float-left和#float-right的固定宽度为100px和200px。如果您希望它们保持并排，则需要给它们百分比宽度。如果您提供#container height: auto，也可以将它们叠加在另一个之上。

<div id="contained" style="overflow: hidden">
 <div id="float-right" style="float: right; width: 33.3%">floated-right</div>
 <div id="float-left" style="float: left; width: 66.6%">floated-left</div>

 <div style="clear: both"></div>
</div>

Answer 2

当页面低于特定宽度时，您可以使用媒体查询来更改样式。例如：

＆＃13;

body { margin: 0; padding: 0; }

#contained { overflow: hidden; background: #f8f8f8; }
#float-right { float: right; width: 200px; background: #ffc; }
#float-left { float: left; width: 300px; background: #ccf; }

@media (max-width: 500px) {
  
  #float-right { width: 33.33%; }
  #float-left { width: 66.66%; }
  
}

＆＃13;

<div id="contained">
 <div id="float-right">floated-right</div>
 <div id="float-left">floated-left</div>
</div>

＆＃13;

注意：您不需要在容器内部使用清除元素，因为overflow样式会使其包含子代。

如果容器div调整得太小，如何使两个浮动（一个到右，一个到左）div不“跳”？

2 个答案: