奇怪的CSS浮动问题

我正在设计一个website，我试图让一个标题有两个较小的标题在它旁边浮动，一个在另一个之下。我试过here，大约在一半的地方说“关于”和“你说什么”。奇怪的CSS浮动问题

about部分显示正确，因为较小的宽度将下一行向下推。但是，在右侧，我无法将文本“推荐”置于“客户端”之下，我认为将所有东西都向左移动可能会起作用，但显然不是。我尝试了很多CSS技巧，但似乎无法弄清楚。

感谢您的帮助。

2010-02-03 JCHASE11

感谢您的帮助！ – JCHASE11 2010-02-04 00:22:41

使上分支显示块，并从两个

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

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

来源

2010-02-04 00:11:02 Emily

左侧标题div的高度为53.9像素，这完全可容纳17.6和14.3加利润的两行。但是，在标题div的高度右侧只有53像素，这并没有留下足够的空间，手动设置标题div的高度（即在你的html中），两条线应该呈现在彼此的顶部，而不是并排。

来源

2010-02-04 00:07:48

我试过了，没有工作。那是我的想法 – JCHASE11 2010-02-04 00:12:24

I认为你将不得不把“cl客户“和”推荐“分为<div>即float: left。将“客户”和“推荐”放在没有浮动和display: block的DIV中。

来源

2010-02-04 00:07:57

+1你的速度更快。至于“为什么”它有点适用于*关于*部分，这是因为'span.bottom'太宽，所以它只是跳到下一行。他确实希望在那里有两个块元素。只需用'display：block;'代替'float：left;'代替两个跨度（或者用'div'代替'span'）就足够了。 – BalusC 2010-02-04 00:12:30

好点，但这会导致问题，如果顶部元素变高（底部元素可能会落在左浮动的下面）。 – 2010-02-04 00:17:06

这是真的，但顶级元素永远不会变高。虽然 – JCHASE11 2010-02-04 00:19:48

你可以把两个span放到另一个div wrapper中。浮动剩余的div &然后将两个跨度显示为块，以便它们位于彼此之上...或者您是否需要保持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反正...我的错。

来源

2010-02-04 00:08:26 Alconja

非常感谢，但我可以改变html，我会给它一个镜头 – JCHASE11 2010-02-04 00:12:55

尝试添加该删除留下的浮动：

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

来源

2010-02-04 00:11:47

奇怪的CSS浮动问题

回答

相关问题