Question

我有以下CSS

        .myClass > div:nth-of-type(1) {}
            .myClass > div:nth-of-type(1) > div {}
                .myClass > div:nth-of-type(1) > div > div:nth-of-type(1) {float: left; width: 25%;}
                .myClass > div:nth-of-type(1) > div > div:nth-of-type(2) {float: right; width: 70%;}

这是行不通的，因为浮动元素导致它们的外部元素（即.myClass > div:nth-of-type(1) > div）没有高度，导致行使其内容溢出到彼此之上。有没有办法没有使用浮点数我可以保持.myClass > div:nth-of-type(1) > div > div:nth-of-type(1)和.myClass > div:nth-of-type(1) > div > div:nth-of-type(2)并排的行为宽度为25%和75% ??? p>

Answer 1

使用display：inline-block而不是float：）

.myClass > div:nth-of-type(1) > div > div:nth-of-type(1) {display: inline-block; width: 25%;}
.myClass > div:nth-of-type(1) > div > div:nth-of-type(2) {display: inline-block; width: 70%;}

Answer 2

我认为将父div设置为overflow: auto会阻止父div崩溃。

Answer 3

你可以这样做：

.myClass > div:nth-of-type(1) > div {overflow: hidden;}

关键是，你只需要封装你的花车（也就是强迫容器环绕浮动的孩子）。还有＆＃34; clearfix＆＃34;方法。

我知道浮动元素没有高度。那么我该如何完成以下任务呢？

3 个答案: