首页 > web前端 > html教程 > Html display inline-block 问题_html/css_WEB-ITnose

Html display inline-block 问题_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:36:08
原创
969 人浏览过


我想用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;
}
。。。。。

部分


   
    

    

            Html display inline-block 问题_html/css_WEB-ITnose
           

  
      

     

                  

street 1


                  

Singapore 081753


     

                
            

            

                singapore@icognitive.com
            

        

  

    
     
    
...
 
  
   

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板