CSS float 将不起作用

Question

我在 http://bit.ly/1Hwbn94 上的 CSS 遇到了一个非常奇怪的情况

所以，我想让带有标题(标题)的红色 div 位于带有(后来隐藏的)移动菜单按钮的绿色框的右侧，但这两个 div 只是保持在彼此下方。

此外，如果标题(和移动菜单按钮)垂直居中(从上到下)，那就太好了。

在这两个 div 周围有一个名为 logo 的框，我为红色 div 指定了正确的 float: left;而且，我在这两个 div 之后放置了一个更清晰的标记。

CSS

#logo {
  height: 80px;
  width: auto;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin: 40px 0 0 210px;
  background: rgba(255, 255, 255, .93);
  padding: 0;
}
#menue {
  margin: 0 auto;
  padding: 0;
  width: 30%;
  float: left;
  background: green;
}
#titel {
  width: 70%;
  margin: 0 auto;
  padding: 0;
  text-align: right;
  background: red;
  overflow: hidden;
}
#titel span {
  padding-right:48px;
}

HTML

<div id="header">
  <div class="box">
    <div id="logo">
      <div id="menue"><img src="wp-content/themes/showcase-child/menue.gif" /></div>
      <div id="titel"><h1><span><a href="<?php bloginfo('home'); ?>" title="<?php bloginfo('title'); ?>"><?php if ( get_option( 'photography_logo' ) <> "" ) { ?><img src="<?php echo get_option( 'photography_logo' ); ?>" alt="logo" /><?php } else { ?><?php bloginfo('title'); ?><?php } ?></a></span></h1></div>
      <div class="clearer"></div>
    </div>
  </div>
</div>

所以，我只是不明白，而红色框不会漂浮在绿色框旁边。你看到错误了吗？提前致谢，伙计们。

Answer 1

您有这些规则(未包含在原始问题中)针对 #logo 容器中的所有 div:

#logo div {
  height: 80px;
  width: 100%;
  float: left;
}

去掉width: 100%就可以了，目前#menue和#titel都是100% 宽，因此它们环绕在两条线上而不是适合一条线。

此外，您应该将 clearer 类放在 #logo div 结束之后，而不是放在里面。