Question

我想在另一个div（WebPage_NavigationWrapper）中传递多个div（function_block）。我不想给WebPage_NavigationWrapper div修正高度，既不增加高度来调整其他div的溢出（function_block），但滚动条出现在WebPage_NavigationWrapper div上。

http://jsfiddle.net/toxic_kz/oqowv1wb/

现在我知道我可以通过display：table-cell来实现这个目标。但是，如果它超过了流量，我会失去function_blocks的宽度。

.function_block{
 display:table-cell;
 width:120px;
 height:60px;
 margin-left:3px;
 margin-top:3px;
 background-color:blueviolet;
}

http://jsfiddle.net/toxic_kz/oqowv1wb/

Answer 1

设置父div的固定高度，然后滚动将启用div。

#WebPage_NavigationWrapper{
   /*display: table;
   table-layout: fixed;*/
   width:100%;
   height:50px;
   padding:10px;
   overflow: auto;



}

请参阅以下链接。

`http://jsfiddle.net/toxic_kz/oqowv1wb/`

Answer 2

我找到了答案;在functionBlock div中引入另一个宽度为px的div，并给出functionBlock div

<div class="function_block">
            <div class="function_inner_block">
                 function_block
            </div>
        </div>

        <div class="function_block">
            <div class="function_inner_block">
                 function_block
            </div>
        </div>

        <div class="function_block">
            <div class="function_inner_block">
                 function_block
            </div>
        </div>

        <div class="function_block">
            <div class="function_inner_block">
                 function_block
            </div>
        </div>

并给出functionBlock div display：table-cell;

.function_block{
display: table-cell;

/*float:left;*/
width:120px;
height:60px;
margin-left:3px;
margin-top:3px;

background-color:blueviolet;

}

.function_inner_block{
width:121px;
min-width:121px;

background-color:yellow;
}

现在，无论谁在我的博客上添加负面标记，都应该更改为加号或给我另一个解决方案......

Answer 3

请使用overflow:auto，overflow:scroll会保留滚动条，无论内容是否有溢出，但auto只会在需要时显示。

所以你的代码应该是这样的：

#WebPage_NavigationWrapper{
   /*display: table;
   table-layout: fixed;*/
   width:100%;
   height:auto;
   padding:10px;
   overflow-x: auto;
   overflow-y: hidden;
}

JSFIDDLE

响应div在另一个div里面流动

3 个答案: