％幅のDivを作成しましたが、オーバーフロースクロールで2000ピクセル幅の幅を持っています

navbarを30％、contentを70％にしてレスポンシブサイトを作ろうとしていますが、私は、コードをアップロードする必要があることを知らせるために、おおよそ2000px広いStyle ％幅のDivを作成しましたが、オーバーフロースクロールで2000ピクセル幅の幅を持っています

オーケー感謝することなので、私が持っている基本的なコードは、この

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <div style="height: 100px;width :100%; background-color: lightblue"> 
 
      <h1></h1> 
 
     </div> 
 
     <!-- MENU LATERAL IZQ --> 
 
     <div id="lateralIzq" style="height: 500px; background-color: lightgreen; width: 30%; float: left;"> 
 
      
 

 
      <!--GALLERY--> 
 

 
     </div> 
 
     <div id="Algo" style="height: 500px; background-color: lightcoral; width: 65%; float: right; overflow-x: scroll"> 
 
      <div style="width: 300px; border: 1px solid red; display: inline-block ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
      <div style="width: 300px; border: 1px solid red; display: inline-block ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
      <div style="width: 300px; border: 1px solid red; display: inline-block ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
      <div style="width: 300px; border: 1px solid red; display: inline-block ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
     </div> 
 
    </body> 
 
</html>

であり、私は彼らのために希望t o同じ行ボットで右にオーバーフローしてスクロールできるようにする

出典

2017-04-04 Juanfri Lira

はい、それは可能です！これまでに何を試しましたか？ - https://stackoverflow.com/help/how-to-ask –

SOはコード作成サービスではありません、あなた自身の努力をして、適切なスニペットと説明を投稿してください – LGSon

途中にもう1つのdivを追加して、xの静的な幅と内側のdivでそれらを左に浮かべるようにしました。終了コードは以下の通りです：

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <div style="height: 100px;width :100%; background-color: lightblue"> 
 
      <h1>Index</h1> 
 
     </div> 
 
     <div id="lateralIzq" style="height: 500px; background-color: lightgreen; width: 30%; float: left;"> 
 
      <h1>Menu</h1> 
 
     </div> 
 
     <div id="Algo" style="height: 500px; background-color: lightcoral; width: 65%; float: right; overflow-x: scroll;"> 
 
      <div style="width: 10000px;"> 
 
       <div style="width: 300px; border: 1px solid red; display:inline; vertical-align: top; float:left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
       <div style="width: 300px; border: 1px solid red; display: inline;vertical-align: top;float:left ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
       <div style="width: 300px; border: 1px solid red; display: inline;vertical-align: top;float:left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
       <div style="width: 300px; border: 1px solid red; display: inline;vertical-align: top;float:left ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

出典

2017-04-04 11:15:26

％幅のDivを作成しましたが、オーバーフロースクロールで2000ピクセル幅の幅を持っています

答えて

関連する問題