Html 如何在我的谷歌地图旁边添加CSS表？

我是CSS新手，我需要学习如何正确使用它。我在页面中央有一个谷歌地图，它显示得很好：

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

我得到的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;
}

现在我想要两列文字直接在地图的右边。如果我模拟它应该是这样的：

当我试着把它放在那里的时候，除了应该放的地方，文本到处都会出现。因此我请求你的帮助。你能告诉我如何得到像下面这些我用表格模拟的东西，这应该用CSS来完成吗？既然我希望文本列位于地图的右侧，我是否应该设置一个

float:right

？为什么我做布局实验时地图会向左移动？我希望你能回答我的一些问题。我假设两列文本的代码不应该是一个表，而是通过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>

我是根据答案这样做的：

安得拉邦

阿鲁纳恰尔邦

阿萨姆邦

        <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>

---

地图容器和区域链接一个div都应该向左浮动

---

然后，您需要确保两个div的宽度都足够小，以适合它们的父容器。然后，它们应该挨着彼此包起来。

这几乎做到了，这是一个重大改进。但是我的地图没有居中，一直向左。我正在用结果更新问题。你说不居中是什么意思？你有我可以看的链接吗？我必须再做一个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>

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