奇怪的CSS浮动问题

Question

我正在设计一个网站，并尝试在一个标题旁边浮动两个较小的标题，一个在另一个下面。我尝试在这里完成它，大约在页面中部，它说“关于”和“你所说的内容”。

关于部分看起来正确，因为较小的宽度将下一行推下去了。但是，在右侧，我无法让“客户”的文本出现在“推荐信”的下方。我认为将所有内容向左浮动就可以解决问题，但显然不行。我尝试了很多CSS技巧，但似乎无法解决。

谢谢您的帮助。

- JCHASE11

Answer 1

我认为你需要将“client”和“testimonials”放到一个单独的<div>中，该

使用float: left。 将“client”和“testimonials”放在没有浮动且具有display: block的DIV中。

- Pekka

---

+1 你比我快。关于“为什么”，它在About部分工作是因为span.bottom太宽了，以至于它跳到下一行。实际上，他确实想要两个块级元素在那里相互排列。只需将两个 span 的 float:left; 替换为 display:block;（或者将span替换为div）就足够了。 - BalusC

好的观点，但如果顶部元素变得更高，这将导致问题（底部元素可能会落在左浮动元素下面）。 - Pekka

这是正确的，但是顶部元素永远不会变高。谢谢。 - JCHASE11

Answer 2

尝试添加以下内容：

试着加入这个：

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

- Nick Craver

Answer 3

你可以将这两个标签放入另一个

容器中。将该

设置为左浮动，然后使这两个显示为块，这样它们就会重叠在一起...或者你需要保持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>

样式表：

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

编辑：实际上，正如其他帖子中的人指出的那样，你根本不需要额外的div...这是我的错误。

- Alconja

---

不，我可以更改HTML，我会试一试。 - JCHASE11

Answer 4

将顶部的span设置为块级元素，并从两个元素中删除左浮动

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

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

- Emily

Answer 5

左侧标题 div 的高度为 53.9 像素，完全容纳了两行分别为 17.6 和 14.3 的文字以及间距。然而，右侧标题 div 的高度仅为 53 像素，留下的空间不够。请手动设置该标题 div 的高度（即在您的html中），这样两行文字就应该重叠显示而不是并排显示。

- Stephen Hudson