Html 如何使两个浮动（一个向右，一个向左）div'；“不是”的意思；“跳跃”；如果容器div的大小调整得太小？

这个问题听起来很复杂，但下面是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

会跳到其下方，不再可见

---

问题是：如果将

#contained

的大小调整为小于

300px

，如何防止

#float left

消失？如何使

#向右浮动

和

#向左浮动

粘在一起如果

#contained

小于

300px

？

当容器

#contained

的大小调整为小于

300px

，并且具有

溢出：隐藏

和固定高度（假定）时，无法防止

#float left

消失-因为

#float left

和

#float right

具有固定的

100px

和

200px

宽度。如果您希望它们并排放置，则需要为它们提供百分比宽度。如果给定

#容器

高度：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>

向右浮动
左漂

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

body{margin:0；padding:0；}
#包含{溢出：隐藏；背景：#F8；}
#右浮动{浮动：右；宽度：200px；背景：#ffc；}
#左浮动{浮动：左；宽度：300px；背景：#ccf；}
@介质（最大宽度：500px）{
#右浮动{宽度：33.33%；}
#左浮动{宽度：66.66%；}
}

向右浮动
左漂

您可以使用媒体查询和浮动div的最大宽度浮动div宽度不会改变。你是说集装箱舱？它的宽度实际上也没有定义，它的变化是更多的元素被添加到浮动右边或浮动左边。最大的问题是如何使浮动元素不溢出容器。然后是一个删除浮动并将div更改为display:inline的媒体查询-block@FunkDoc谢谢我从未使用过媒体查询。你能举例说明一下大概是什么样子（我必须写什么？）谢谢，我会试试这个。但是0.1%的刷新率呢？你可以尝试通过两个小数点（例如33.33%和66.66%）来接近它，但我建议测试它，以确保div在所有浏览器中仍然并排适合。谢谢！我想我会选择34%和66%，这样就100%准确了。：）