2009-07-11 1 views
0

シナリオ: 1つのヘッダーDIVと3つのDIVが横に並んでいます。テキストオーバーフローの問題とテキストノンラップ

問題: HEADER_A divの "Text"がHEADER_B DIVにオーバーフローしています。

スクリーンショット/ CSS:

alt text http://thumb0.webshots.net/t/74/174/8/92/12/2239892120105349420zNlkOc_th.jpg

#header{ 
height:127px; 
width: 718px; 
} 

#header_a { 
    width:181px; 
    height: 127px; 
    color:#FFFFFF; 
    float:left; 
} 

#header_b{ 
width: 363px; 
float:left; 
height: 127px; 
/*background-image:url(../images/logo.jpg);*/ 
background-position:bottom; 
background-repeat:no-repeat; 
background-color:#006600; 
} 

#header_c{ 
width: 174px; 
float:left; 
height: 127px; 
} 

<div id="header"> 
     <div id="header_a">ddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div> 
     <div id="header_b"></div> 
     <div id="header_c"><img src="images/nuevo.png" /></div> 
    </div> 

答えて

2

ddddddddddddddddddddddddddddddddddddddddddddddddddddddd>は181pxです。

明らかに、1つの単語として取られ、単語が分割されないので、オーバーフローすることは明らかです。いくつかの適切なテキストを使用してみてくださいまたは「ddddddddddd ddddddddddddd ddddddddddddddddd dddddddddddddd」のようないくつかのスペースを与える

EDIT:同じことが画像にどうなる一方

。したがって、親よりも大きいdiv内のものはすべてオーバーフローします。試してみてください'overflow:hidden'

関連する問題