一尘不染

如何使CSS浮动在一行中?

css

我想在同一行上使用两个项目float: left作为左侧的项目。

我一个人就能做到这一点没有问题。问题是, 即使您将浏览器的尺寸调整得很小 ,我也希望这两项 保持 同一行。您知道…就像桌子一样。 __

我们的目标是 无论在什么情况下都 不会包裹右边的物品。

我该如何使用CSS告诉浏览器,我宁愿 拉伸包含而div不是包装它,因此float: right;div在float: left;
div?之下?

我想要的是:

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

阅读 680

收藏
2020-05-16

共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。
2020-05-16