奇怪的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浮動問題

回答

相關問題