另一个div内的响应div流

我想在另一个div（WebPage_NavigationWrapper）中流动多个div（function_block）。我不想给WebPage_NavigationWrapper div固定高度，既不增加其高度来调整其他div（function_block）的溢出，但滚动条出现在WebPage_NavigationWrapper div。另一个div内的响应div流

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

现在我知道我可以通过显示器实现这一点：表细胞;但是如果超过了流程，我会失去function_blocks的宽度。父DIV的

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

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

来源

2014-12-04 toxic

你这样看？ http://jsfiddle.net/oqowv1wb/4/ – 2014-12-04 10:49:20

如果使用'overflow-x：auto'，滚动条只会在div溢出时出现。但我不确定那是你在找什么？ – Mysteryos 2014-12-04 10:49:34

我想用固定高度的WebPage_NavigationWrapper滚动条溢出 – toxic 2014-12-04 11:30:34

我找到了答案，介绍与宽度另一个格中像素的functionBlock 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显示：表细胞;

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

现在谁把负马克在我的博客应更改到加标记或给我带来另一种解决方案....

来源

2014-12-04 11:52:56 toxic

设置固定的高度，然后滚动条将启用股利。

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



}

请参照下面的链接从小提琴。

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

来源

2014-12-04 11:09:59 Sush

我想用WebPage_NavigationWrapper的固定高度滚动条溢出 – toxic 2014-12-04 11:32:55

刚刚删除'自动添加'滚动' – Sush 2014-12-04 11:43:53

我找到了答案http://jsfiddle.net/toxic_kz/oqowv1wb/6/ – toxic 2014-12-04 11:55:18

-1

请使用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

来源

2014-12-04 11:11:30 babusi

代码仍然不显示滚动条加我想要高度的WebPage_NavigationWrapper div保持高度相同，但我不想为响应式设计目的提供px高度 – toxic 2014-12-04 11:19:52

@toxic您希望滚动条何时出现？现在，当＃WebPage_NavigationWrapper的宽度不超过120px，这是'.function_block'的宽度时出现 – babusi 2014-12-04 11:24:34

我想用WebPage_NavigationWrapper的固定高度滚动条溢出 – toxic 2014-12-04 11:30:49

另一个div内的响应div流

回答

相关问题