Html 当我添加带有overflow:auto的滚动条时，我的div不再并排出现

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>

职位名称
位置
申请者：
金沙萨、刚果、民主共和国。共和国
二月十日至十七日
卢本巴希1号、卡莱米2号、乌维拉2号、布卡武3号、戈马4号、贝尼2号、布尼亚2号、刚果民主共和国。共和国
二月十日至十七日
戈马，刚果，德国。共和国
二月十日至十七日
金沙萨、刚果、民主共和国。共和国
二月十日至十七日
戈马，刚果，德国。共和国
二月十日至十七日
金沙萨、刚果、民主共和国。共和国
二月十日至十七日
卡莱米（1个驿站）和乌维拉（1个驿站），刚果，德国。共和国
二月十日至十七日
布尼亚，刚果，德国。共和国
二月十日至十七日
戈马，刚果，德国。共和国
二月十日至十七日
金沙萨、刚果、民主共和国。共和国
二月十日至十七日
金沙萨、刚果、民主共和国。共和国
2017年2月12日
刚果共和国
2017年2月11日
刚果共和国
2017年2月11日
金沙萨、刚果、民主共和国。共和国
15/02/2017
戈马，刚果，德国。共和国
15/02/2017 
金沙萨、刚果、民主共和国。共和国
14/02/2017
贝尼，刚果，德国。共和国
14/02/2017 
金沙萨、刚果、民主共和国。共和国
14/02/2017

---

上面的代码是并排添加两个div。一次跳水，右边的拿着一个JQVMap，左边的拿着一张桌子。当我不添加overflow:auto时，它们彼此相邻，但当我添加overflow:auto时，右div（带表格）位于另一个下方。我需要一个烤饼架和两个沙发并排

您可以将

的样式设置为

空白：nowrap

，将

的样式设置为

显示：内联块

，也可以使用

溢出-x:auto

强制容器只有水平滚动条。

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

---

这有助于

它们比宽度大。您必须考虑滚动条的宽度。