创建一个具有％宽度的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，具有溢出滚动

回答

相关问题