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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
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 &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;
}
。。。。。
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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。