Question

我在这里制作了一个页面http://arin.esy.es/arin/site/species.php

问题是fish div（有类＆＃34;节点＆＃34;）似乎包装在父div中（类＃34; row＆＃34;）。我想要它，以便所有节点div在行div中水平排列。我不想让它包裹起来。此外，可能会有更多行div。

我也想要它，以便没有任何行div获得任何滚动条。应该有一个水平滚动条，但它应该只用于行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;
}

Answer 1

overflow: scroll属性不适用于表<td>。看到这个答案：

overflow:scroll; in <td>

overflow: hidden似乎适用于表，但只有将<td>的样式设置为table-layout:fixed时才有效。但是，overflow: auto或overflow: scroll在任何情况下都不起作用。

大多数人解决此问题的一种方法是将内容包装在<td> ... </td>中的div之间，然后为overflow设置div属性。

在您的情况下，这意味着将overflow样式属性赋予具有.row类的div，因为.row已经包含了表格行的所有内容：

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

我明白这不是你想要的，遗憾的是你想要的东西在CSS中是不可能的。围绕div中的表格行内容可能是您的最佳选择。

如何强制div与滚动条一起显示在1行？

1 个答案: