作者: mankowk 時間: 2015-4-4 09:27 標題: 請教 CSS inline, 改唔到 google maps 既排版.
[attach]1778632[/attach]
我寫緊一個網頁, 例如想, 左邊放張相, 右邊放google map.
如上圖, 左手邊係相(上), google map(下).
但我想變成圖既右手邊咁, 相(左). google map(右).
我用 CSS 將 div 變做 inline, 但發覺會連 google map 都唔見左.
- <!DOCTYPE HTML>
- <html lang="zh-Hant-HK">
- <head>
- <meta charset="utf-8">
- <title>google maps test</title>
- <style>
- div {display: block;} <!-- 試過呢度 block 做 inline , 但係會無左 googl maps -->
- </style>
- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=FALSE"></script>
- <script type="text/javascript">
- function initialize() {
- var latlng = new google.maps.LatLng(22.274463,114.187483);
- var mapOptions = {
- zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
- }
- </script>
- </head>
- <body onload="initialize()">
- <div>
- <img width="200" height="200" src="a.jpg" />
- </div>
- <div id="map_canvas" style="width: 100px; height: 200px"></div>
- </body>
- </html>
作者: takayo72 時間: 2015-4-4 09:48
提示: 作者被禁止或刪除 內容自動屏蔽
作者: llk 時間: 2015-4-4 10:08
- div {
- display: inline-block;
- }
作者: Jackass_TMxCK 時間: 2015-4-4 11:51
div {float:left}
作者: mankowk 時間: 2015-4-4 16:49
謝謝大家幫忙.
llk 兄, 呢個中晒.
如用 float 會走樣...
- div {
- display: inline-block;
- }
作者: gamezz 時間: 2015-4-4 19:34
回復 5 #mankowk
Ie6 無inline block, 最好用div包住然後float left, float right.
via HKEPC Reader for Android
作者: ip4368 時間: 2015-4-4 21:08
回復 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啦
作者: gamezz 時間: 2015-4-4 22:11
回復 7 #ip4368
如果學你，我會block晒非chrome的browser
via HKEPC Reader for Android
作者: wongfung 時間: 2015-4-6 01:33
http://www.barelyfitz.com/screen ... ng/css/positioning/
睇下幫唔幫到你