如何添加overflow-y：scroll？

时间：2017-09-11 14:23:22

标签： html css css3

我有我的HTML代码：

＆＃13;
＆＃13; 
<div>
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;">
        <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;">
            <div style="float: left;">ROW X COLUMN</div>
        </div>
        <div style="position: relative; width: 395px; padding: 2px; background-color: rgb(255, 255, 255); display: table;">
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div>
                <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div>
                <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div>
                <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div>
            </div>
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div>
                <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div>
                <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div>
                <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div>
            </div>
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div>
                <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div>
                <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div>
                <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我想添加overflow-y：scroll，以便从2 X 0开始的列出现在1 X 0列的右边。

我尝试了各种css，但无法弄清楚如何修复。请有人帮我弄清楚。

3 个答案:

答案 0 :(得分：2)

虽然我会使用flexbox而不是以像素为单位指定width，但您实际上希望阻止float属性将元素包装在新行中。您可以使用display: inline-block和white-space: nowrap：

执行此操作 

<div>
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;">
        <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;">
            <div style="float: left;">ROW X COLUMN</div>
        </div>
        <div style="position: relative;width: 100%;padding: 2px;background-color: rgb(255, 255, 255); white-space: nowrap; overflow-y: auto;">
            <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;">
                <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div>
                <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div>
                <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div>
                <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div>
            </div>
            <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;">
                <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div>
                <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div>
                <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div>
                <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div>
            </div>
            <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;">
                <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div>
                <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div>
                <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div>
                <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div>
            </div>
        </div>
    </div>
</div>

答案 1 :(得分：0)

2 x列的位置不取决于overflow-y

它取决于宽度，因此您必须在父级宽度的30％上添加列的宽度，并将正确的子html属性添加到表中，以便表格单元格

<md-hint>About</md-hint>
<p data-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

答案 2 :(得分：-1)

您希望列2x0只显示在右侧还是您想要滚动条？ 如果你只想让列彼此相邻，你可以尝试使用表（一个表来保存其他表），如果这不起作用，只需使用带有三个指定（或自动）宽度的网格列的css网格布局，然后是一行自动高度，然后根据需要放置表格。 （然后我想如果你真的想要滚动条，只需在框div中的某处输入“overflow-y：scroll”。）

相关问题
最新问题