私がオーバーフローしてスクロールを追加する場合：オート、私の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> 

上記のコードによって、もはや辺は辺で2つのdiv側を追加することではないです。 1回のダイビング、​​右側のダイビングはJQVMapを保持し、左側のダイビングはテーブルを保持します。私がオーバーフローを追加しないとき：autoは互いに隣り合っていますが、オーバーフローを追加すると自動的に右側のdivがテーブルの下になります。私はscollバーとお互いの横のdivが必要です。

Answer 1

あなたはdisplay: inline-blockに設定のスタイル「<div>で、white-space: nowrapへのスタイル」<section>を設定するかもしれないいずれか、またはあなただけの水平方向のスクロールバーを持っているコンテナを強制的に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;"> 

これは、彼らが幅よりも大きいです