【问题标题】:Do you really need a width on floated element?你真的需要浮动元素的宽度吗?
【发布时间】:2014-05-17 00:04:24
【问题描述】:

假设您有一个 Div (id="toolbar"),在该工具栏中您有一个包含 2 个按钮的 Div (id="ButtonHolder")。如果您将#ButtonHolder 浮动到右侧并且没有在其上设置明确的宽度,那是洁净吗?

我读过堆栈溢出,您应该始终在浮动元素上设置宽度。从保存到应用,按钮文本可能会发生变化,我不想每次都调整#ButtonHolder 的宽度。

我考虑过将#ButtonHolder 的宽度设置为auto,但浏览器默认会这样做,因此似乎没有必要将其宽度设置为自动。我担心浏览器可能不会总是像我认为的那样浮动#ButtonHolder

【问题讨论】:

  • 你能给那个源答案的链接吗?
  • “我已经读到堆栈溢出,你应该始终在浮动元素上设置宽度” - 这根本不是真的。
  • 您可以使用具有固定宽度的浮动容器并在其中对按钮进行文本对齐。所以容器的宽度保持不变,没有跳动的效果。这与固定按钮的宽度相同,以避免切换它们的跳动效果。
  • @Axel 也许在 IE6 仍然存在问题时这是一个非常古老的答案:)
  • 您可以将 div 指定为显示内联块,因此它将仅占用其内容所需的宽度,而不是使用所有可用空间的默认块。如果 div 包含块显示元素,则需要处理它们,但内联内容使用所需的最小值。

标签: javascript jquery html css


【解决方案1】:

老实说,从“保存”到“应用”的更改不会占用更多空间。

原则上,是的,您应该始终设置宽度 - 如果您不设置,则说您有按钮 float:left; 和另一个 <div> float:right;。如果你不设置宽度,它们就不会占据整个屏幕宽度,所以你在下面放置的任何元素都会尝试将自己定位在两者之间的间隙中。

对于这种特殊情况,使用 100% 宽度的容器元素来防止所描述的效果也是一个好主意。

【讨论】:

    【解决方案2】:

    floatposition 通常是有代价的。您应该首先尝试找到其他方法在布局中定位元素。您可以考虑其他选项,例如marginpaddingdisplay: inline-block;text-align ...等。

    我建议阅读this

    直接回答您的问题。为浮动设置宽度不是写在石头上但不这样做,通常意味着以后麻烦。至少在我个人看来。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-04-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-03-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多