Question

float:left和float:right存在问题。我以前从未见过这样的问题。我必须监督一些事情。

我尝试给包装器一个固定的宽度，我试着给搜索框一个固定的宽度。没有任何效果。如果您缩小Chrome浏览器，它也会出错。这有什么问题？

有问题的CSS：

.wrapper {
  margin: 0 auto;
  min-width: 980px;
  width: 90%;
}

.logo {
   float: left;

   margin-top: 27px;
}

.search {
  float: right;

  background: rgba(255,255,255,0.35);
  padding: 9px;
  border-radius: 3px;
  margin-top: 40px;
}

HTML：

<div class="wrapper">
   <div class="logo"><img ../></div>
   <div class="search">[...]</div>
   <br style="clear:both;" />
</div>

问题：为什么在所有浏览器/缩放中搜索框没有浮动到包装器的右侧？

编辑：

问题解决了！谢谢你，“rblarsen”和“Anonymous.X”！

Answer 1

如果您提供.wrapper {overflow:hidden;}，则会解决问题。

我认为这是因为.wrapper没有任何高度，因此不会在中心对齐。只要您没有为overflow:hidden;指定高度，只需添加.wrapper即可使div与内容保持相同的高度。

修改

overflow:hidden;会导致未来出现问题。检查t.niese的评论，以避免这些。

Answer 2

试试这个

1.将position:relative添加到您的包装器

.wrapper {
          margin: 0 auto;
          min-width: 980px;
          width: 90%;
          position:relative;
         }

将position:absolute;right:0;添加到您的浮动div中，就像这样

<div style="float:right;position:absolute;right:0"></div>

浮动的奇怪的跨浏览器问题：对

2 个答案: