CSS 浮动不起作用

Question

上 CSS 遇到了一个非常奇怪的情况

所以，我想让带有（后来隐藏的）移动菜单按钮的绿色框右侧带有标题（标题）的红色 div，但是那两个 div 只是保留保持在彼此之下。

此外，如果标题（和移动菜单按钮）垂直居中（从上到下）就更好了。

在这两个 div 周围有一个名为 logo 的框，我给红色 div 正确的浮动：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 class 放在 #logo div 结束后而不是里面。

Answer 2

将 CSS 的 #logo div 部分中的 width:100% 更改为 width:50%。

此外，您在 #logo div 中有一个不必要的 float:left，您可以从 #menue 中删除 width。

Answer 3

取出

width: 100%;

在你的#logo div in style.css 中使用第 205 行，它会很好

CSS 浮动不起作用

CSS float will not work

css

floating