小编典典

如何将 CSS 浮动保持在一行中?

all

我想在同一行上有两个项目,float: left用于左侧的项目。

我独自实现这一点没有问题。 问题是,即使您将浏览器的大小调整得很小 ,我也希望这两个项目 保持 在同一行。你知道......就像桌子一样。 __

目的是使右侧的项目 无论如何都不会 被包裹。

如何使用 CSS 告诉浏览器我宁愿 拉伸包含div而不是包装它,这样float: right;div 就在float: left;
div?

我想要的是:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

阅读 78

收藏
2022-06-20

共1个答案

小编典典

将您的浮动<div>s 包装在<div>使用此跨浏览器最小宽度 hack 的容器中:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

可能 还需要设置“溢出”,但可能不需要。

这有效,因为:

  • !important声明,结合使所有内容min-width在 IE7+ 中保持在同一行
  • IE6 没有实现min-width,但它有一个错误,例如width: 100px覆盖!important声明,导致容器宽度为 100px。
2022-06-20