当前位置:Gxlcms > html代码 > Htmldisplayinline-block问题_html/css_WEB-ITnose

Htmldisplayinline-block问题_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:23人阅读

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

          Carousel Template · Bootstrap          
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;
}
。。。。。
部分






Singapore




street 1


Singapore 081753











...




人气教程排行