請教 CSS inline, 改唔到 google maps 既排版.


我寫緊一個網頁, 例如想, 左邊放張相, 右邊放google map.
如上圖, 左手邊係相(上), google map(下).
但我想變成圖既右手邊咁, 相(左). google map(右).

我用 CSS 將 div 變做 inline, 但發覺會連 google map 都唔見左.
  1. <!DOCTYPE HTML>
  2. <html lang="zh-Hant-HK">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>google maps test</title>
  6.         <style>
  7.                 div {display: block;}        <!-- 試過呢度 block 做 inline , 但係會無左 googl maps -->
  8.         </style>

  9.         <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=FALSE"></script>
  10.         <script type="text/javascript">
  11.                 function initialize() {
  12.                         var latlng = new google.maps.LatLng(22.274463,114.187483);
  13.                         var mapOptions = {
  14.                         zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP
  15.                         };
  16.         var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  17.                 }
  18.     </script>
  19. </head>

  20. <body onload="initialize()">
  21.         <div>
  22.                 <img width="200" height="200" src="a.jpg" />
  23.         </div>
  24.         <div id="map_canvas" style="width: 100px; height: 200px"></div>
  25. </body>
  26. </html>
複製代碼
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

張兩個div float 咪得囉

TOP

  1. div {
  2.     display: inline-block;
  3. }
複製代碼

TOP

div {float:left}

TOP

謝謝大家幫忙.
llk 兄, 呢個中晒.
如用 float 會走樣...
  1. div {
  2.     display: inline-block;
  3. }
複製代碼

TOP

回復 5 #mankowk

Ie6 無inline block, 最好用div包住然後float left, float right.

via HKEPC Reader for Android

TOP

回復 mankowk

Ie6 無inline block, 最好用div包住然後float left, float right.

via HKEPC Reader for An ...
gamezz 發表於 2015-4-4 19:34


我做web developer就唔鬼理ie6, 直頭detect到ie 6出頁"your browser is not supported"叫個user upgrade啦

TOP

回復 7 #ip4368

如果學你,我會block晒非chrome的browser

via HKEPC Reader for Android

TOP

TOP