奇怪的 CSS 浮动问题答案

【问题标题】：Strange CSS float issue奇怪的 CSS 浮动问题
【发布时间】：2012-05-16 21:37:01
【问题描述】：

我正在设计一个website，我试图让一个标题与两个较小的标题在它旁边浮动，一个在彼此下方。我试过here，大约在它说“关于”和“你在说什么”的中间。

about 部分看起来是正确的，因为较小的宽度将下一行向下推。但是，在右侧，我无法将文本“推荐”放在“客户”下。我认为简单地将所有内容浮动到左侧就可以了，但显然不行。我尝试了很多 CSS 技巧，但似乎无法弄清楚.

感谢您的帮助。

【问题讨论】：

标签： html css css-float

【解决方案1】：

我认为您必须将“客户”和“推荐”放入单独的<div>，即float: left。将“client”和“testimonials”放在没有浮动和display: block的DIV中。

【讨论】：

+1 你速度更快。至于“为什么”它在 About 部分起作用，这是因为 span.bottom 太宽以至于它只是跳到下一行。他确实想要两个块元素在彼此下方。只需将两个跨度的 float:left; 替换为 display:block;（或将 span 替换为 div）就足够了。
好点，但是如果顶部元素变得更高，这会导致问题（底部元素可能会落在左侧浮动元素的下方）。
这是真的，但顶部元素永远不会变得更高。不过谢谢

【解决方案2】：

尝试添加这个：

.top { display: block; float: none; }
.bottom{ float: none; }

【讨论】：

【解决方案3】：

制作顶部跨度显示块并从两者中删除左侧的浮动

span.top {
  color:white;
  display:block;
  font-size:16px;
  margin-bottom:2px;
}

span.bottom {
  color:#28DDFF;
  font-size:13px;
}

【讨论】：

【解决方案4】：

您可以将两个跨度放入另一个 div 包装器中。将 div 向左浮动，然后将两个 span 显示为块，这样它们就位于彼此之上...或者您是否需要保持 html 相同？

html:

<div class="title">
    <div class="border_topright"></div>
    <h2>What You're Saying</h2>
    <div class="title_left" >
        <span class="top">Client</span>
        <span class="bottom">Testimonials</span>
    </div>
    <div class="border_bottomright"></div>
</div>

CSS：

.title_left { float: left; }
.title_left span.top, .title_left span.bottom { display: block; /*remove the float*/ }

编辑：实际上正如其他发帖者所指出的那样，你不需要额外的 div ......我的错误。

【讨论】：

不，我可以更改 html，我会试一试

【解决方案5】：

左边title div的高度是53.9px，完全容纳了17.6和14.3这两条线加上边距。但是右边title div的高度只有53 px，没有留出足够的空间。手动设置该标题 div 的高度（即在您的 html 中），这两行应该彼此重叠呈现，而不是并排呈现。

【讨论】：