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

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

  
    


Contact Us
    

        Singapore
        53 Cantonment  Road #02-00

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

    

        12, place de La Défense
        Maison de La Défense

      
        Room 315, Kim Nam Venture Building
           Binjiang District

    

   谢谢楼上两位，用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;  
}  
。。。。。  
部分  
  


  
  


  

  
  
street 1
  
Singapore 081753
  

  


  
  
[e-mail]  

  

  

  



...