另一個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流

回答

相關問題