ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML 表示インラインブロック 问题_html/css_WEB-ITnose

HTML 表示インラインブロック 问题_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:36:08
オリジナル
968 人が閲覧しました


我想用html+CSS 实现图上功能,于是用了inline-block。图中文字分为4块,问题是我输入的文字在同一块中无法换行,一旦我用
,就会文字不出现,代码如下:



    
                            #块1
                   Singapore

                   53 Cantonment  Road #02-00

         


    
                                           #块2
                    Malaysia

                    Suite 2A-5-1, Block 2A, Plaza Sentral

            


    
                                                             #块3
                12, place de La Défense

         Maison de La Défense

         
 

    
                                                             #块4
                Room 315, Kim Nam Venture Building
   
                 Binjiang District
   
            

         


回复讨论(解决方案)

不好意思,代码贴错了,下面是我用的代码



    
                            #块1
                   Singapore

                   53 Cantonment  Road #02-00

         


    
                                           #块2
                    Malaysia

                    Suite 2A-5-1, Block 2A, Plaza Sentral

            


    
                                                             #块3
                12, place de La Défense

                 Maison de La Défense

         
 

    
                                                             #块4
                Room 315, Kim Nam Venture Building
   
                 Binjiang District
   
            

         

试一试 

,如果还是不行的话,估计是你的盒太小了,把你的CSS贴出来看看。

试一试 

,如果还是不行的话,估计是你的盒太小了,把你的CSS贴出来看看。


box够大,

我试了,还是不行:


为什么不用display:table- cell和display:table-row


试一试 

,如果还是不行的话,估计是你的盒太小了,把你的CSS贴出来看看。


box够大,

我试了,还是不行:



在我这里试都是正常的,文字是可以换行的,只是你的块1,块2...没有样式,所以没有达到你所发图的那种效果。我用楼上的方法给你写个demo吧。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Carousel Template &middot; Bootstrap</title>    <style type="text/css">    .box{          width: 700px;          height: 300px;          border: 1px solid gray;         }     tr{      height:100px;      text-align: left;       }    td{      width:350px;      }    </style>  </head>  <body>  <div class="box">    <table>    <tr>      <th>Contact Us</th>    </tr>    <tr>      <td>        Singapore<br>        53 Cantonment  Road #02-00<br>      </td>      <td>        Malaysia<br>        Suite 2A-5-1, Block 2A, Plaza Sentral<br>      </td>    </tr>    <tr>      <td>        12, place de La D&eacute;fense<br>        Maison de La D&eacute;fense<br>      </td>      <td>        Room 315, Kim Nam Venture Building<br>           Binjiang District<br>       </td>    </tr>    </table>  </body></html>
ログイン後にコピー

谢谢楼上两位,用table-cell 也可以写出来了。
CSS 部分:
。。。。。。。
.table{ 
display:table; 
width:1300px;
margin:0 auto;
text-align:center; 
}

.office-location{
display:table-cell;
*display:inline-block;
width:1000px;
*width:auto;
}
。。。。。
部分



   
    

    

            Singapore
           

  
      

     

                  

street 1


                  

Singapore 081753


     

                
            

            
        

  

    
     
    
...
 
  


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート