當我添加具有溢出滾動：汽車，我的div並排

Question

HTML代碼

<section style= " 
    height: 600px; 
    width:800px; 
    padding: 10px;"> <div id="vmap" style="width: 800px; height: 600px; width: 50%; 
    height: 600px; 
    width:800px; 
    background: red; 
    float: left; 
    margin: 0 auto; "></div><div style="margin-left: 50%; 
    height: 600px; 
    width: 800px; 

overflow-y : scroll;"><table style = "margin-left:auto; 
    margin-right:auto;"> 
    <tr> 
    <th>Job Title</th> 
    <th>Location</th> 
    <th>Apply By: </th> 
    </tr> 
    <tr> 
    <td ><a href="https://jobs.undp.org/cj_apply.cfm?cur_job_id=70470" >Chargé (e) des Affaires Humanitaires Assistant (3 postes) </a></td> 
    <td>Kinshasa, CONGO, DEM. REPUBLIC</td> 
    <td>Feb-10-17 </td> 
</td> 
    </tr> 
    <tr> 
    <td><a href = "https://jobs.undp.org/cj_apply.cfm?cur_job_id=70417">Chauffeur </a></td> 
    <td>Lubumbashi 1, Kalemie 2, Uvira 2, Bukavu 3, Goma 4, Beni 2, Bunia 2, CONGO, DEM. REPUBLIC</td> 
    <td>Feb-10-17 </td> 
    </tr> 
    <tr> 
    <td><a href = "https://jobs.undp.org/cj_apply.cfm?cur_job_id=70495">Secrétaire Exécutif (ve)</a></td> 
    <td>Goma, CONGO, DEM. REPUBLIC</td> 
    <td>Feb-10-17 </td> 
</tr> 
    </tr> 
    <tr> 
    <td><a href = " 
https://jobs.undp.org/cj_apply.cfm?cur_job_id=70496">Assistant (e) à la gestion de l’information </a></td> 
    <td>Kinshasa, CONGO, DEM. REPUBLIC 
</td> 
    <td>Feb-10-17 </td> 
    </tr> 
    <tr> 
    <td><a href = "https://jobs.undp.org/cj_apply.cfm?cur_job_id=70418">Assistant Administratif Common UN System </a></td> 
    <td>Goma, CONGO, DEM. REPUBLIC</td> 
    <td>Feb-10-17 </td> 
</tr> 
<tr> 
    <td><a href = "https://jobs.undp.org/cj_apply.cfm?cur_job_id=70420">Chargé de Finances et Voyages Assistant Common UN System </a></td> 
    <td>Kinshasa, CONGO, DEM. REPUBLIC</td> 
    <td>Feb-10-17</td> 
</tr> 
    <tr> 
    <td><a href = " 
https://jobs.undp.org/cj_apply.cfm?cur_job_id=70497">Assistant (e) Humanitaire de Terrain </a></td> 
    <td>Kalemie (1 poste) & Uvira (1 poste), CONGO, DEM. REPUBLIC </td> 
    <td>Feb-10-17 </td> 
</tr> 
    <tr> 
    <td><a href = "https://jobs.undp.org/cj_apply.cfm?cur_job_id=70468">Chargé (e) des Affaires Humanitaires Assistant</a></td> 
    <td>Bunia, CONGO, DEM. REPUBLI</td> 
    <td>Feb-10-17 </td> 
</tr> 
    <tr> 
    <td><a href = " 
https://jobs.undp.org/cj_view_job.cfm?cur_job_id=70469">Chargé (e) des Affaires Humanitaires/ rapportage Associé(e)</a></td> 
    <td>Goma, CONGO, DEM. REPUBLIC</td> 
    <td>Feb-10-17</td> 
</tr> 
    <tr> 
    <td><a href = " 
https://jobs.undp.org/cj_view_job.cfm?cur_job_id=70496">Assistant (e) à la gestion de l’information</a></td> 
    <td>Kinshasa, CONGO, DEM. REPUBLIC</td> 
    <td>Feb-10-17</td> 
</tr> 
    <td><a href = " 



https://www.unicef.org/about/employ/?job=496654">Chief, Child Protection</a></td> 
    <td>Kinshasa, CONGO, DEM. REPUBLIC</td> 
    <td> 12 Feb 2017 </td> 
</tr> 
<tr> 
    <td><a href = "https://www.unicef.org/about/employ/?job=501993" class="job-link" data-job-id="501993">REPUBLICATION Consultant international pour développer le positionnement stratégique d’UNICEF en milieu péri-urbain sur le secteur Eau, hygiène et assainissement (EHA)</a></td> 
    <td>Democratic Republic of Congo</td> 
    <td>11 Feb 2017 </td> 
    </tr> 
    <tr> 
    <td><a href = "https://www.unicef.org/about/employ/?job=501991">REPUBLICATION Consultant international pour la CONCEPTION D’UN PROJET INTERSECTORIEL VISANT A REDUIRE LA MALNUTRITION CHRONIQUE DES ENFANTS</a></td> 
    <td>Democratic Republic of Congo</td> 
    <td>11 Feb 2017 </td> 
</tr> 
    <tr> 
    <td><a href = "https://careers.un.org/lbw/jobdetail.aspx?id=69804" class="job-link" data-job-id="501993">CHIEF OF STAFF [Temporary]</a></td> 
    <td>Kinshasa, CONGO, DEM. REPUBLIC</td> 
    <td>15/02/2017</td> 
    </tr> 
    <tr> 
    <td><a href = " 
https://careers.un.org/lbw/jobdetail.aspx?id=69804">SUPPLY OFFICER</a></td> 
    <td>Goma, CONGO, DEM. REPUBLIC</td> 
    <td>15/02/2017 </td> 
</tr> 
    <tr> 
    <td><a href = "https://careers.un.org/lbw/jobdetail.aspx?id=73331" class="job-link" data-job-id="501993">DIRECTOR, POLITICAL AFFAIRS [Temporary] </a></td> 
    <td>Kinshasa, CONGO, DEM. REPUBLIC</td> 
    <td>14/02/2017</td> 
    </tr> 
    <tr> 
    <td><a href = " 
https://careers.un.org/lbw/jobdetail.aspx?id=73708">CONTINGENT OWNED EQUIPMENT ASSISTANT </a></td> 
    <td>Beni, CONGO, DEM. REPUBLIC </td> 
    <td>14/02/2017 </td> 
</tr> 
    <tr> 
    <td><a href = " 
https://careers.un.org/lbw/jobdetail.aspx?id=73157" class="job-link" data-job-id="501993">ADMINISTRATIVE ASSISTANT </a></td> 
    <td>Kinshasa, CONGO, DEM. REPUBLIC</td> 
    <td>14/02/2017</td> 
    </tr> 
</table></div></section> 

上面的代碼，就是靠添加兩個div側不再側。一次潛水，右側持有JQVMap，左側持有一張桌子。當我不添加溢出：自動他們是彼此相鄰，但是當我添加溢出：自動正確的div（與表）在另一個下面。我需要一個scoll酒吧和兩個div在彼此旁邊。

Answer 1

你可以要麼到<section>的風格white-space: nowrap，與<div>「設置的風格設定爲display: inline-block，或者您可以使用overflow-x: auto迫使容器只有水平滾動條。

Answer 2

<section style= " 
    height: 600px; 
    width:100%; 
    padding: 10px;"> <div id="vmap" style="width: 800; height: 600; width: 50%;float:left; 
    height: 600px; 
    width:60%; 
    background: red; 
    float: left; 
    margin: 0 auto;"></div><div style="margin-left: 50%; 
    height: 600px; 
    width: 40%; 
    overflow:scroll;"> 

這有助於