Question

所以，我试图让浮动的div隐藏在父级的div中，但它不起作用...... 我的代码：的CSS：

        div.scrollarea {
            overflow: scroll;
            width: 400px;
            float: left;
        }

        div.td {                
            float: left;
            width: 100px;
            height: 20px;
            background-color: red;
        }

HTML：

        <div class="scrollarea">
            <div class="td">x1</div>
            <div class="td">x2</div>
            <div class="td">x3</div>
            <div class="td">x4</div>
            <div class="td">x5</div>
        </div>

所以我得到的是：（由于防止垃圾邮件无法上传图片，所以这里是链接） http://i.stack.imgur.com/I0cH1.png

我想要的是将所有.td放在同一行，水平滚动会出现。

谢谢，

Answer 1

要隐藏其父中的元素，您必须将父元素relative置于子元素absolute，然后使用z-index隐藏子元素在父母背后是这样的：

#parentID{ position: 'relative'; /* required */ /* more needed styles */ } #child_element{ /* or class here instead of id */ position: 'absolute'; /* required */ z-index:-99; /* reqyured */ /* more needed styles */ }

要让孩子出现，您必须将他们的z-index属性设置为大于0的任何值

Answer 2

这就是浮动元素的行为方式，当它们不适合时，它们向下推直到它们适合（如果不是上面的所有部分具有相同的高度，它可能并不总是在下一个“行”的最左侧）这不是你的例子中的问题）

如果你希望它们都在一行中，你必须确保它们全部包含在一个元素中，它保留宽度以便它们全部放在一行中：

<div class="scrollarea">
   <div style="width: 500px;">
       <div class="td">x1</div>
       <div class="td">x2</div>
       <div class="td">x3</div>
       <div class="td">x4</div>
       <div class="td">x5</div>
   </div>
</div>

在父div中隐藏浮动div的问题

2 个答案: