創建一個具有％寬度的Div，但它的內部寬度爲2000px，具有溢出滾動

我試圖使用30％的導航欄和70％的內容創建響應站點，但在內容中我想要一個可滾動的div大致2000像素寬Style 創建一個具有％寬度的Div，但它的內部寬度爲2000px，具有溢出滾動

歐凱感謝，讓我知道，我需要上傳的代碼，所以基本的代碼，我是這個

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

，我想爲他們Ť o在同一行的機器人溢出到右側，並能夠滾動它

來源

2017-04-04 Juanfri Lira

是的，它是可能的！你試過什麼了？ - https://stackoverflow.com/help/how-to-ask –

SO不是一個代碼編寫服務，可以自己做一個努力，然後用工作片段和解釋 – LGSon

訣竅是在中間添加另一個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，但它的內部寬度爲2000px，具有溢出滾動

回答

相關問題