HTML5 CSS水平滚动多个动态列数

Question

我在让 div 水平滚动时遇到问题。 div 具有动态数量的列，可以超过页面的 100% 宽度。目前，我将总宽度设置为固定的 px 宽度（1500px）以获得水平滚动。但是，由于列数是动态的，因此 div 应该增长以适应新列，而不是将新列隐藏在 div 下方。

这是我的页面的一个小提琴被剥离： https://jsfiddle.net/razzledazzle/jpj2cuo7/5/ 您可以看到可见列中的最后一个输入是“最后一个可见”。输入的下一列是“新看板列表不可见”。

如何将 div#board-container 的宽度更改为 100% 而不是 1500px 并且仍然水平滚动？它的布局与 Trello 或 MeisterTask 非常相似。

div#main-kanban {
  top: 49px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  bottom: 52px;
}

div#content-kanban {
  position: absolute;
  left: 0;
  right: 0px;
  overflow: hidden;
  height: 100%;
  overflow-x: auto;
  background: #e3e3e3;
}

div#board-container {
  width: 1500px;
  top: 49px;
  position: absolute;
  height: 100%;
  overflow: hidden;
}

section#kanban-board {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  margin-bottom: 49px;
}

div.kanban-individual {
  display: inline-block;
  vertical-align: top;
  width: 320px;
  overflow-y: scroll;
  height: 100%;
  float: left;
  background-color: #e3e3e3;
  cursor: pointer;
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  -o-transition: background 0.3s linear;
  -ms-transition: background 0.3s linear;
  transition: background 0.3s linear;
}

Answer 1

感谢@ketan 和@Carol McKay，他们为我指明了正确的道路。通过将高度设置为 100% 并在 div#board-container 上使用 display:flex，我设法让它按照我的需要工作。

这里是Working Fiddle

工作的 CSS：

div#main-kanban {
    top: 49px;
    position: absolute; 
    right: 0;
    left: 0;
    bottom:52px;
}

div#content-kanban {
    position: absolute;
    left: 0;
    right: 0px;
    overflow: hidden;
    height: 100%;
    overflow-x: auto;
    background: #e3e3e3;
}

div#board-container {
    width: 100%;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex; 
    display:flex;
    height:100%;
}

section#kanban-board {
    margin-bottom:49px;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex; 
    display:flex;
}

div.kanban-individual {
    display: inline-block;
    vertical-align: top;
    width: 320px;
    overflow-y: scroll;
    float: left;    
    background-color: #e3e3e3;
    cursor: pointer;
    -webkit-transition: background 0.3s linear;
    -moz-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;
    -ms-transition: background 0.3s linear;
    transition: background 0.3s linear;
}

我对此唯一担心的是缺乏对 IE 8-10 和旧 Webkit 浏览器的浏览器兼容性。我根据this page 添加了一些浏览器技巧 ，但它仍然不适用于旧的 IE。

Answer 2

我认为用纯 css 实现这一点并不容易。但是用一点 jquery 就很简单了。请尝试以下示例。

$(document).ready(function () {
                var columnCount = $(".column").length;
                var columnWidth = $('.column').outerWidth();
                var colWrapperWidth = (columnCount * columnWidth)+'px';
                $(".col-wrapper").css("width", colWrapperWidth);
            });

.content{
                height: 50px;
                width: 500px;
                float: left;
                border: solid 5px red;
                overflow-x: scroll;
                overflow-y: hidden;
            }
            .col-wrapper{
                float: left;
            }
            .column{
                width: 100px;
                border: solid 2px white;
                float: left;
                background: green;
                color: white;
                text-align: center;
                line-height: 20px;
            }

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="content">
            <div class="col-wrapper">
                <div class="column">column01</div>
                <div class="column">column02</div>
                <div class="column">column03</div>
                <div class="column">column04</div>
                <div class="column">column05</div>
                <div class="column">column06</div>
                <div class="column">column07</div>
                <div class="column">column08</div>
                <div class="column">column09</div>
            </div>
        </div>

Answer 3

将您的 css 更改为以下内容会很好。使用display:flex; 并从section 和board-container 中删除position:absolute

div#board-container {
  width: 100%;
  height: 100%;
  display:flex;
}

section#kanban-board {
  display:flex;
}

Updated Fiddle

Answer 4

css替换

div#board-container {
  /* overflow: hidden; remove this */
}

section#kanban-board {
  display:flex;
  margin-bottom: 49px;
}

div.kanban-individual {
  flex:0 0 320px;
  vertical-align: top;
  overflow-y: auto;
  height: 100%;
  background-color: #e3e3e3;
  cursor: pointer;
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  -o-transition: background 0.3s linear;
  -ms-transition: background 0.3s linear;
  transition: background 0.3s linear;
}

https://jsfiddle.net/jpj2cuo7/7/

新链接

https://jsfiddle.net/jpj2cuo7/12/

Answer 5

使用这个

section#kanban-board{ display: inline-flex;}