如何強制div與滾動條一起顯示？

我在這裏製作一個頁面http://arin.esy.es/arin/site/species.php 如何強制div與滾動條一起顯示？

問題是魚div（有class「節點」）似乎包裝在父div（類「row」）中。我想要它，以便所有節點div都在行div中水平行1行。我不希望它包裹。另外還有更多的行格。

我也希望它，以便沒有任何行divs獲得任何滾動條。應該有一個水平滾動條，但它應該只適用於行div的父級，這是一個td標籤。垂直滾動條不應該存在。水平滾動只有在需要時纔可見。

有誰知道如何做到這一點？

謝謝。

HTML

<!DOCTYPE > 
<html> 
    <head></head> 
    <body> 
     <table id="fish_container"> 
      <tbody> 
       <tr> 
        <td id="category_container" valign="top"> 
         <div class="row"> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
          <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div> 
         </div> 
        </td> 
        <td id="species_container" valign="top"></td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

CSS

html { 
    background-color:blue; 
} 

#fish_container { 
    width:100%; 
    height:100%; 
} 
#category_container { 
    width:75%; 
    height:100%; 
    overflow-x: scroll; 
} 
#species_container { 
    width:25%; 
    height:100%; 
    overflow-x: scroll; 
    overflow-y: scroll; 
} 
.row { 
    width:100%; 
    height:100px; 
    text-align: center; 
    white-space: nowrap; 
} 
.node { 
    width:100px; 
    height:100px; 
    display: inline-block; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center center; 
    border: 2px solid transparent; 
} 
.node:hover { 
    border: 2px solid green; 
}

來源

2015-01-03 omega

發表了一些代碼.. –

這應該只是CSS，你不應該爲它需要任何Javascript。 – Barmar

可以製作一個寬度爲50000px的元素，這樣子女就不會換行（或者任何合理的）。將其父項的溢出設置爲自動或滾動 – charlietfl

的overflow: scroll屬性不會隨表<td>工作。看到這個答案：

overflow:scroll; in <td>

overflow: hidden似乎與表很好地工作，但是隻有當你的<td>的樣式設置爲table-layout:fixed。但在任何情況下，overflow: auto或overflow: scroll都不起作用。

一種方式大多數人解決，這是通過包裝<td> ... </td>之間的內容在div，然後設置overflow屬性，用於div。

在你的情況，這將意味着給overflow樣式屬性到div與.row類，因爲.row已經包圍錶行的所有內容：

.row { 
    width:100%; 
    height:100px; 
    text-align: center; 
    white-space: nowrap; 
    overflow-x: auto; 
}

我明白這不是你想要的不幸的是，你想要的是不可能在CSS中。圍繞在div您的錶行內容也許是您最好的選擇。

來源

2015-01-03 03:25:10 Bolboa

如何強制div與滾動條一起顯示？

回答

相關問題