html - float 和溢出-x : hidden;

Question

我试图隐藏盒子的其余部分，如果它超出容器宽度(实际代码中为100％)。元素是 float 的。

但是，它将它们扔到下一行，而不是隐藏其剩余部分。

这是我为演示该问题而制作的示例。

<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;
}

我怎样才能实现这个目标？

这是一个演示该问题的 fiddle :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
• 删除了 float :左；来自.wrapper.box
• 添加了显示:inline-block；到 .wrapper .box