Question

我使用display：table和display：table-cell。

时出现问题

Fiddley：http://jsfiddle.net/5q51sbqb/1/

我有一个显示器的div：table;并且在那两个带显示的div中：table-cell;

左边的div（.t1）是一个固定的宽度，右边的div（.t2）应占据容器边缘的剩余空间。

我的问题在于向右侧div（.t2）添加一个长div（2000px）。我基本上需要内容窗口保持与其父级相同的宽度，而不是超出容器的范围，以允许滚动内容。

请记住，这需要不使用固定宽度，因为容器和t2都是响应式的。而且我还必须使用表格和表格单元格显示属性：（

所以基本上.t2 div的孩子在我需要它们以适应容器宽度时（不在内容窗口上设置固定宽度......和.t2 div） p>

我很难过。

HTML

        </div>
    </div>
    <div class="table-cell t2">
        <div id="content-window">
            <div id="content"></div>
        </div>
   </div>
</div>
</div>

CSS

#container{
   width: 600px;
   height: 600px;
   margin: 0px auto;
   background-color:green;
   padding: 2px;
}

#table{
   display:table;
   width:100%;
}

.table-cell{
   display:table-cell;
   height: 300px;
   padding:2px;
}

.t1{
   width: 100px;
   background-color: red;
}
.t2{
   width:auto;
   background-color: blue;
}

#content-window{
   width:100%;
   overflow:scroll;
}

#content{
   width: 2000px;
   height: 50px;
   background-color:yellow;
}

Answer 1

由于您巧妙地创建了#content-window，因此将其设置为position: absolute;，这样就不会弄乱单元格的自动宽度。请记住将.t2设置为position: relative，以便#content-window可以使用右表格单元格中包含的空格填充宽度和高度。

提示：如果您希望仅水平滚动，请使用overflow-x。

#container{
    width: 600px;
    height: 600px;
    margin: 0px auto;
    background-color:green;
    padding: 2px;
}

#table {
    display:table;
    width:100%;
}

.table-cell{
    display:table-cell;
    height: 300px;
    padding:2px;
}

.t1 {
    width: 100px;
     background-color: red;
}
.t2 {
    position: relative;
    background-color: blue;
}

#content-window{
    position: absolute;
    width:100%;
    height: 100%;
    overflow: hidden;
    overflow-x: scroll;
    height:50px;
}

#content{
    width: 2000px;
    height: 50px;
    background-color:yellow;
}

在此处查看：http://jsfiddle.net/5q51sbqb/4/

Css表格单元规则和自动宽度溢出

1 个答案: