Question

我正在设计一个website，我正试图让一个标题旁边有两个较小的标题，一个在另一个之下。我尝试过这样做here，大约在它说“关于”和“你说什么”的一半。

about部分显示正确，因为较小的宽度会向下推下一行。但是，在右边我不能让文本“推荐”在“客户端”下。我想简单地将左边的所有东西都浮起来会起作用，但显然不行。我已经尝试了很多css技巧但似乎无法弄明白

感谢您的帮助。

Answer 1

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

Answer 2

尝试添加此内容：

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

Answer 3

您可以将两个span放入另一个div包装器中。漂浮div左右＆amp;然后将两个跨度显示为块，以便它们位于彼此之上...或者您是否需要保持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 ......我的错误。

Answer 4

制作顶部跨度显示块并从两个

中移除左侧浮动

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

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

Answer 5

左边标题div的高度为53.9像素，完全可以容纳两条17.6和14.3加边距。但是，右侧标题div的高度仅为53像素，这不会留下足够的空间。手动设置该标题div的高度（即在你的html中），这两行应该相互重叠而不是并排呈现。

奇怪的CSS浮动问题

5 个答案: