Question

如果超出容器宽度（实际代码中为100％），我试图隐藏其余部分。元素是浮动的。

但是，它会将它们抛到下一行，而不是隐藏它的剩余部分。

以下是我为展示问题所做的示例。

<div class="wrapper">
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box red"></div>

    <!-- Just for showing the pink box -->
    <div style="clear: both;"></div>
</div>

和CSS

.wrapper {
    width: 180px;
    background-color: pink;

    overflow-x: hidden;
}

.wrapper .box {
    width: 50px;
    height: 50px;

    float: left;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

我怎样才能做到这一点？

以下是展示问题的小提琴：http://jsfiddle.net/bLaxyvwb/2/

Answer 1

这是JSFiddle，其中包含您需要应用的更改。

使用以下CSS：

.wrapper{
 width: 180px;
 background-color: pink;
 white-space: nowrap;
 overflow-x: hidden;
}

.wrapper .box {
 width: 50px;
 height: 50px;
 display: inline-block;
}

HTML应如下所示：

<div class="wrapper">
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box red"></div>
</div>

我做了以下事情：

添加了空格：nowrap到.wrapper
删除浮动：左;来自.wrapper .box
添加了display：inline-block;到.wrapper .box

漂浮和溢出-x：隐藏;

1 个答案: