如何添加我的谷歌地圖旁邊的CSS表？

我是一個CSS新手，我需要學習如何正確使用它。我有一個谷歌地圖在頁面上居中，並顯示得好：如何添加我的谷歌地圖旁邊的CSS表？

<div class="mapContainer"> 
     <div id="gmap" style="margin: auto">&nbsp;</div> 
    </div>

創建地圖是沒有什麼特別的：

map = new google.maps.Map(document.getElementById("gmap"), mapOptions); 
var mapdiv = document.getElementById("gmap"); 
mapdiv.style.width = '1000px'; 
mapdiv.style.height = '600px'

我得到的幫助，我不明白這裏的一切，但CSS到目前爲止它呈現正確：

/* @override http://localhost:8000/static/css/style.css */ 
@import url("960.css"); 
@import url("reset.css"); 
@import url("text.css"); 
@import url("uni-form-generic.css"); 
@import url("uni-form.css"); 

.clearfix {display: block;} 
.fleft{float:left;} 

    #buttons, .koolbuttons { 
     float:left; 
    } 

    #map { 
     width: 900px; 
     height: 600px; 
    } 
    #controls { 
     margin: 0; 
     list-style: none; 
    } 
    #controls li { 
     display: inline; 
     margin-left: 42px; 
     font-family: Sans-Serif; 
     font-size: 10pt; 
    } 
    #fusion-hm-li { 
     visibility: hidden; 
     margin-left: 8px; 
    } 

h1, h2, h3, h4, h5, h6, h7, h8 { 
    text-shadow: #fff 1px 1px 1px; 
} 

a {} 
a:link {color: #750006;} 
a:visited {color:#0D1826;} 
a:hover {color: #d2e0f7; text-decoration:none} 

.nobk:hover { 
    background:none; 
} 

body { 
    font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; 
    font-size: 12px; 
    margin: 0px; 
    color:#2C4F66; 
    background-color:#ffffef; 
    line-height:1.3; 
} 

#main_content { 
    background: yellow; 
} 

#footer { 
    background-color:#99b3cc; 
    color:#2C4F66; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    margin-top: 15px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    //text-shadow: #fff 1px 1px 1px; 
} 

#mainCol ul { 
    list-style:none; 
    margin:10px 0 10px 0; 
    padding:0; 
} 

#mainCol li { 
    display:inline; 
    margin:0 0 0 1px; 
    padding:0; 
} 

#mainCol li a:link, #mainCol li a:visited { 
    text-decoration:none; 
    font-size:1.3em; 
    font-weight:bold; 
    color: #000; 
    background-color:#ebebeb; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    text-shadow: #fff 1px 1px 1px; 
} 

#mainCol li a:hover { 
    color:#d2e0f7; 
    background-color:#336699; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    text-shadow: #666 1px 1px 1px; 
} 

.mapContainer #gmap { 
    height: 400px; 
    border-top: 2px solid #8D9BA1; 
    border-bottom: 2px solid #8D9BA1; 
} 

.mapContainer2 #gmap { 
    height: 300px; 
    overflow:hidden; 

} 

.title1 { 
    font-size: 20px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    background-color:#99b3cc; 
    color:#2C4F66; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    text-shadow: #fff 1px 1px 1px; 
} 

/* ========== A view =========== */ 

#contact_info { 
    background-color:#d2e0f7; 
    color:#2C4F66; 
    padding: 10px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
} 

#contact_info h6{ 
    font-size: 12px; 
} 

.tag { 
    font-weight:bold; 
    color: #d2e0f7; 
    background-color:#8D9BA1; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    text-shadow: #666 1px 1px 1px; 
} 

a:hover .tag { 
    background-color: #2C4F66; 
    text-decoration: none; 
} 

a:visited .tag { 
    color: #FFF 
} 
/* ========== DEV Info ============*/ 

.dev_avatar { 
    float:left; 
} 

#dev-info { 
    padding-left:220px; 
} 

.dev_name { 
    font-size: 36px; 
    font-weight: bold; 
    text-shadow: #fff 1px 1px 1px; 
} 

.dev_location { 
    font-size: 18px; 
} 

.dev-result{ 
    font-size:18px; 
    width: 32%; 
    float: left; 
} 

.countries_list dt { 
    font-size: 14px; 
    font-weight: bold; 
} 

.countries_list dd a{ 
    font-size: 12px; 
    text-decoration: none; 
} 

.link_to_profile { 
    font-size: 14px; 
    height: 25px; 
    width: 49%; 
    float: left; 
} 

/* Debug class */ 
.show { 
    background-color:pink; 
} 

/* Mugur CSS Starts Here */ 

.ybox{ 
    background-color:#d2e0f7; 
    color:#2C4F66; 
    padding: 10px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
} 

#header { 
    margin-bottom:20px; 
    position:relative; 
} 

#logo-wrap{ 
    position:relative; 
    width:480px; 
} 

#logo-text{ 
    position:absolute; 
    top:70px; 
    left:150px; 
} 

#logo-text h1{ 
    font-size:24px; 
    font-weight:bold; 
    color:#2C4F66; 
    text-shadow: #cccccc 1px 1px 1px; 
} 

#user-ident { 
    float:right; 
    clear:both; 
    position:relative; 
    text-align:right; 
    background-color:#d2e0f7; 
    color:#2C4F66; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    text-shadow: #fff 1px 1px 1px; 
} 

#navbar{ 
    float:right; 
    clear:both; 
} 

#tags { 
    line-height:2; 
} 

#dev_bio { 
    font-size:18px; 
} 

/* Forms */ 

.uniForm fieldset { 
    border:1px solid #DFDFDF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -ms-border-radius: 5px; 
    padding: 5px; 
} 

.uniForm fieldset legend { 
    font-size: 1.5em; 
} 

/*** Stats */ 
#countries_map { 
    margin-left: auto; 
    margin-right: auto; 
}

現在我想直接在地圖的右側的兩列文字。如果我嘲笑它，它應該是這個樣子：

enter image description here

當我試圖把它似乎無處不在，除非它應該文本。所以我要求你的幫助。你能告訴我怎樣才能得到類似於我用桌子嘲笑的以下內容，這應該用CSS來完成嗎？我是否應該創建一個float:right，因爲我想讓地圖右側的文本列？爲什麼我的地圖在我進行佈局實驗時向左移動？我希望你能回答我的一些問題。我想對文本的2列的代碼不應該是一個表，並通過CSS得到它的佈局，而不是使之與geogrphy名稱的部分是要看起來像：

<div class="region_links_one"> 
      <ul class="regions_one"> 
       <li><a id="region_8" href="/andhra_pradesh/" >Andhra Pradesh</a></li> 
       <li><a id="region_9" href="/arunachal_pradesh/" >Arunachal Pradesh</a></li> 
       <li><a id="region_10" href="/assam/" >Assam</a></li> 

       <li><a id="region_11" href="/bihar/" >Bihar</a></li> 
       <li><a id="region_12" href="/chhattisgarh/" >Chhattisgarh</a></li> 
       <li><a id="region_13" href="/goa/" >Goa</a></li> 
       <li><a id="region_14" href="/gujarat/" >Gujarat</a></li> 
       <li><a id="region_15" href="/haryana/" >Haryana</a></li> 
       <li><a id="region_16" href="/himachal_pradesh/" >Himachal Pradesh</a></li> 

       <li><a id="region_17" href="/jammu_kashmir/" >Jammu & Kashmir</a></li> 
       <li><a id="region_18" href="/jharkhand/" >Jharkhand</a></li> 
       <li><a id="region_19" href="/karnataka/" >Karnataka</a></li> 
       <li><a id="region_20" href="/kerala/" >Kerala</a></li> 
       <li><a id="region_21" href="/madhya_pradesh/" >Madhya Pradesh</a></li> 
      </ul> 

      <ul class="regions_two"> 
       <li><a id="region_22" href="/maharashtra/" >Maharashtra</a></li> 
       <li><a id="region_23" href="/manipur/" >Manipur</a></li> 
       <li><a id="region_24" href="/meghalaya/" >Meghalaya</a></li> 
       <li><a id="region_25" href="/mizoram/" >Mizoram</a></li> 
       <li><a id="region_26" href="/nagaland/" >Nagaland</a></li> 

       <li><a id="region_27" href="/orissa/" >Orissa</a></li> 
       <li><a id="region_28" href="/punjab/" >Punjab</a></li> 
       <li><a id="region_29" href="/rajasthan/" >Rajasthan</a></li> 
       <li><a id="region_30" href="/sikkim/" >Sikkim</a></li> 
       <li><a id="region_31" href="/tamil_nadu/" >Tamil Nadu</a></li> 
       <li><a id="region_32" href="/tripura/" >Tripura</a></li> 

       <li><a id="region_34" href="/uttaranchal/" >Uttaranchal</a></li> 
       <li><a id="region_33" href="/uttar_pradesh/" >Uttar Pradesh</a></li> 
       <li><a id="region_35" href="/west_bengal/" >West Bengal</a></li> 
      </ul> 
     </div>

謝謝

**Update**

我這樣做是根據答案：

安得拉邦

阿魯納恰爾邦

阿薩姆

 <li><a id="region_11" href="/bihar/" >Bihar</a></li> 
     <li><a id="region_12" href="/chhattisgarh/" >Chhattisgarh</a></li> 
     <li><a id="region_13" href="/goa/" >Goa</a></li> 
     <li><a id="region_14" href="/gujarat/" >Gujarat</a></li> 
     <li><a id="region_15" href="/haryana/" >Haryana</a></li> 
     <li><a id="region_16" href="/himachal_pradesh/" >Himachal Pradesh</a></li> 

     <li><a id="region_17" href="/jammu_kashmir/" >Jammu & Kashmir</a></li> 
     <li><a id="region_18" href="/jharkhand/" >Jharkhand</a></li> 
     <li><a id="region_19" href="/karnataka/" >Karnataka</a></li> 
     <li><a id="region_20" href="/kerala/" >Kerala</a></li> 
     <li><a id="region_21" href="/madhya_pradesh/" >Madhya Pradesh</a></li> 
    </ul> 

    <ul class="regions_two"> 
     <li><a id="region_22" href="/maharashtra/" >Maharashtra</a></li> 
     <li><a id="region_23" href="/manipur/" >Manipur</a></li> 
     <li><a id="region_24" href="/meghalaya/" >Meghalaya</a></li> 
     <li><a id="region_25" href="/mizoram/" >Mizoram</a></li> 
     <li><a id="region_26" href="/nagaland/" >Nagaland</a></li> 

     <li><a id="region_27" href="/orissa/" >Orissa</a></li> 
     <li><a id="region_28" href="/punjab/" >Punjab</a></li> 
     <li><a id="region_29" href="/rajasthan/" >Rajasthan</a></li> 
     <li><a id="region_30" href="/sikkim/" >Sikkim</a></li> 
     <li><a id="region_31" href="/tamil_nadu/" >Tamil Nadu</a></li> 
     <li><a id="region_32" href="/tripura/" >Tripura</a></li> 

     <li><a id="region_34" href="/uttaranchal/" >Uttaranchal</a></li> 
     <li><a id="region_33" href="/uttar_pradesh/" >Uttar Pradesh</a></li> 
     <li><a id="region_35" href="/west_bengal/" >West Bengal</a></li> 
    </ul> 
</div>

從而提高了的東西，但在地圖現在，當我設法這樣的元素將不再被居中：

enter image description here

現在我在地圖和鏈接周圍添加另一個div後得到滿意結果：

#holder { 
    width: 945px ; 
    margin-left: auto ; 
    margin-right: auto ; 
}

enter image description here

來源

2011-12-05 Niklas Rosencrantz

兩個地圖容器和region_links_one DIV應該向左浮動。

然後，你需要確保兩個div的寬度足夠小，以適應他們的父容器。然後他們應該彼此相鄰。

來源

2011-12-05 13:05:43 cowls

這幾乎做到了，並且是一項重大改進。但是我的地圖沒有居中，一直走到左邊。我正在更新結果的問題。 –

你的意思是不是居中？你有鏈接，我可以看看嗎？ – cowls

我不得不做另一個div和center。我的地圖鏈接是http：//www.koolbusiness。com和我也會更新我原來的問題。非常感謝你，現在它接近完美。 –

如何添加我的谷歌地圖旁邊的CSS表？

回答

相關問題