Question

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

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

如何将div＃board-container width更改为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％并使用display：flex on div＃board-container来设置工作。

以下是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;并从position:absolute和section

中删除board-container

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

section#kanban-board {
  display:flex;
}

<强> Updated Fiddle

Answer 4

css replacement

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

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

5 个答案: