<效果如下,怎麼可以這樣子|=|位置錯亂了html
>
<
head
>
<
title
>九歌·少司命
title
>
<
style
type
="text/css"
>
style
>
head
>
<
body
>
<
hr/>
<
div
style
="width:200px"
>
<
span
>秋蘭兮麋蕪，羅生兮堂下；
span
>
<
div
style
="float:right"
>
|=|
div>
div>
<
div
style
="width:200px"
>
<
span
>綠葉兮素華，芳菲菲兮襲予；
span
>
<
div
style
="float:right"
>
|=|
div>
div>
<
hr/>
body
>
html
>
上面引申出清除浮動問題, 因為有加了float:right的原故,會影響後面的展示效果.
所以我們需要清除浮動. 在後加個兄弟級別的
全**如下(15,23行分別新增):
1在給父級別的新增額外樣式overflow:hidden"><
html
>
2<
head
>
3<
title
>九歌·少司命
title
>
4<
style
type
="text/css"
>56
style
>
7head
>
8<
body
>
9<
hr/>
10<
div
style
="width:200px"
>
11<
span
>秋蘭兮麋蕪，羅生兮堂下；
span
>
12<
div
style
="float:right"
>
13|=|
14div
>
15<
div
style
="clear:both"
>
div>
16div
>
1718
<
div
style
="width:200px"
>
19<
span
>綠葉兮素華，芳菲菲兮襲予；
span
>
20<
div
style
="float:right"
>
21|=|
22div
>
23<
div
style
="clear:both"
>
div>
24div
>
25<
hr/>
26body
>
27html
>
(在10,18行分別新增了overflow:hidden)
1<
html
>
2<
head
>
3<
title
>九歌·少司命
title
>
4<
style
type
="text/css"
>56
style
>
7head
>
8<
body
>
9<
hr/>
10<
div
style
="width:200px;overflow:hidden"
>
11<
span
>秋蘭兮麋蕪，羅生兮堂下；
span
>
12<
div
style
="float:right"
>
13|=|
14div
>
1516
div>
1718
<
div
style
="width:200px;overflow:hidden"
>
19<
span
>綠葉兮素華，芳菲菲兮襲予；
解決span中的內容不換行
span white space 通過html文件的源 的排版方式控制頁面顯示文字的排版方式 取值 normal pre nowrap pre wrap pre line inherit normal 正常無變化 預設處理方式.文字自動處理換行.假如抵達容器邊界內容會轉到下一行 pre 保持html...
div中內容文字垂直居中 文字不換行顯示省略號
目錄 div中文字垂直居中 2 文字不換行，文字溢位顯示省略標誌 1 行高法 文字的行高和容器的高度相同，p2 內邊距 padding 法 適合一行或幾行文字垂直居中，原理就是利用padding將內容垂直居中 p3 css3的transform來實現 center vertical.center h...
如何讓div中的內容垂直居中
要讓div中的內容垂直居中，無非有以下幾種方法，等我一一枚舉 如果要垂直居中的只有一行或幾個文字，那它的製作最為簡單，只要讓文字的行高和容器的高度相同即可，比如 p這段 可以達到讓文字在段落中垂直居中的效果。另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用padding將內容...