如何使DIV在CSS的x可滚动窗格中左侧流动？

我想创建一个特定高度和宽度的X滚动面板，其中DIV应该位于连接到底部左侧的行中（请参阅此示例：http://jsbin.com/ohahac/1/edit）。我只想将此面板滚动到左侧。如何使DIV在CSS的x可滚动窗格中左侧流动？

我在这里失踪或做错了什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN"> 

<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>untitled</title> 
     <meta name="generator" content="TextMate http://macromates.com/"> 
     <meta name="author" content="headkit-studio"> 
     <!-- Date: 2013-03-21 --> 
     <style> 
      *{ 
       margin:0; 
       padding:0; 
      } 
      .blockdiv{ 
       height: 500px; 
       float:left; 
       min-height:400px; 
      } 

     </style> 

    </head> 
    <body> 
     <div id="main" style="overflow:hidden;"> 
      <div class="leftbar" style="width:150px; height: 500px; position: relative; float: left; display: inline; background-color:black;">LEFT</div> 
      <div id="content" style="width:100%"> 
       <div class="section"> 
        <div class="region" style="overflow-x:scroll; width:1200px; border:1px dotted black; height: 500px;"> 
         <div id="01" class="blockdiv" style="background-color:yellow; width:450px">1</div> 
         <div id="01" class="blockdiv" style="background-color:blue; width:690px">2</div> 
         <div id="01" class="blockdiv" style="background-color:silver; width:500px">3</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

thnx !!

编辑：用白色空间工作正常：nowrap; （看看：http://jsbin.com/ohahac），但是这个解决方案增加了div元素之间的一些差距！垂直滚动条也是不行的。 :-(

来源

2013-03-21 headkit

你只想要inline-block。不float:left 也white-space:nowrap;该地区包装。

http://jsbin.com/ohahac/15/edit

这里是一个简单的一个

http://jsfiddle.net/btevfik/JuEVy/

来源

2013-03-21 11:59:28 btevfik

哎，感谢名单！我将尝试。是的，更简单是更好的，但我需要模拟我的实际网站布局这里。 – headkit 2013-03-21 12:43:47

@headkit其有趣的一面出。 – btevfik 2013-03-21 12:46:20

thanx你。但也相对复杂。您的解决方案很酷，但会在划分的div元素之间创建一个小间隙，并且由于滚动条的原因会在面板上添加一点点高度。 – headkit 2013-03-21 13:00:55

如何使DIV在CSS的x可滚动窗格中左侧流动？

回答

相关问题