ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML 表示インラインブロック 问题_html/css_WEB-ITnose
HTML 表示インラインブロック 问题_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:36:081019ブラウズ
我想用html+CSS 实现图上功能，于是用了inline-block。图中文字分为4块，问题是我输入的文字在同一块中无法换行，一旦我用0c6dc11e160d3b678d68754cc175188a,就会文字不出现，代码如下：
47eabecc5a4cd172f9cb299731b3ed23
53b05fdf370d8f8b53d78fba712eb263 #块1
Singapore0c6dc11e160d3b678d68754cc175188a
53 Cantonment Road #02-000c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba68
f60b881be035bab9fbcfea2e492530d3 #块2
Malaysia0c6dc11e160d3b678d68754cc175188a
Suite 2A-5-1, Block 2A, Plaza Sentral0c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba68
53641fc92cf72d9f935f97e9f6f678a5 #块3
12, place de La Défenseff9d32c555bb1d9133a29eb4371c1213
Maison de La Défenseff9d32c555bb1d9133a29eb4371c1213
16b28748ea4df4d9c2150843fecfba68
53641fc92cf72d9f935f97e9f6f678a5 #块4
Room 315, Kim Nam Venture Buildingff9d32c555bb1d9133a29eb4371c1213
Binjiang Districtff9d32c555bb1d9133a29eb4371c1213
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
回复讨论(解决方案)
不好意思，代码贴错了，下面是我用的代码
47eabecc5a4cd172f9cb299731b3ed23
f60b881be035bab9fbcfea2e492530d3 #块1
Singapore0c6dc11e160d3b678d68754cc175188a
53 Cantonment Road #02-000c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba68
92ed69daa8a0b2dd49e03cf7308301c1 #块2
Malaysia0c6dc11e160d3b678d68754cc175188a
Suite 2A-5-1, Block 2A, Plaza Sentral0c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba68
80940d55d11ea5d85af9d514fa1de1f1 #块3
12, place de La Défenseff9d32c555bb1d9133a29eb4371c1213
Maison de La Défenseff9d32c555bb1d9133a29eb4371c1213
16b28748ea4df4d9c2150843fecfba68
53b05fdf370d8f8b53d78fba712eb263 #块4
Room 315, Kim Nam Venture Buildingff9d32c555bb1d9133a29eb4371c1213
Binjiang Districtff9d32c555bb1d9133a29eb4371c1213
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
试一试 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3，如果还是不行的话，估计是你的盒太小了，把你的CSS贴出来看看。
试一试 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3，如果还是不行的话，估计是你的盒太小了，把你的CSS贴出来看看。
box够大，e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3我试了，还是不行：
f951eba1c5ab86419706e28cb6257a1a
.box{
width: 700px;
height: 300px;
border: 1px solid red;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
为什么不用display:table- cell和display:table-row
试一试 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3，如果还是不行的话，估计是你的盒太小了，把你的CSS贴出来看看。
box够大，e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3我试了，还是不行：
f951eba1c5ab86419706e28cb6257a1a
.box{
width: 700px;
height: 300px;
border: 1px solid red;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
在我这里试都是正常的，文字是可以换行的，只是你的块1，块2...没有样式，所以没有达到你所发图的那种效果。我用楼上的方法给你写个demo吧。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Carousel Template · 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éfense<br> Maison de La Dé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;
}
。。。。。
6c04bd5ca3fcae76e30b72ad730ca86d部分
56368239dbc9200bb7b33119577a55cc
c4e95686469f2eb8c8fcb2e3be99b396
5d2ac2df90db22d2010cbf21192a92bc
4e8ddd9d065e2b51a894fd9633315354
7491ae7c89ec42f2ac0bb04f136a5bc1
16b28748ea4df4d9c2150843fecfba68
c95c06815487f6e2ca8ea02a9110cd7b
43bd9f48938db2c57dfdd8f2d64f33fc
e388a4556c0f65e1904146cc1a846beestreet 194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeSingapore 08175394b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
d872c65f576ccc9e7183d6c5b1d3ae4a
2af3439fdb9386fee3114cc3b9d73725singapore@icognitive.com5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
ce424495be7d811dc5e3f44dffda27e8
9be0d03acf41ebc92dfabe57fd2fbb84
...
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e