Question

上的CSS有一个非常奇怪的情况

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

此外，如果标题（和移动菜单按钮）垂直居中（从上到下），那将会很不错。

在这两个div周围有一个名为logo的盒子，我给了红色div正确的浮子：左;而且，在这两个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

您针对div容器中的所有#logo定制了这些规则（未包含在原始问题中）：

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

取出width: 100%它会正常工作，此时#menue和#titel都是100%宽，所以它们包裹在两行而不是拟合在一个。

此外，您应该在clearer #logo结束后将div课程放在其中，而不是在其中。

Answer 2

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

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

Answer 3

取出

UIView

在style.css的#logo div中，行号为205，它会很好

CSS float不起作用

3 个答案: