内联列溢出

Question

我正在为我的主页制作显示器。我在一个容器中创建了五个 col-md-2，并将列的大小调整为我需要的宽度。调整它们的大小很容易，但现在我遇到了一个问题。而不是这些列都等于占据了容器总宽度的 83.3%，在调整它们的大小之后，它们现在总共占据了容器的 116%。其中一些列的边距彼此重叠一点，但仍然会有一些额外的空间需要在左侧和右侧溢出容器。我可以让最左边的列溢出容器之外，但我很难让最右边的列溢出。任何时候最右边（蓝色）的 div 太大而无法容纳在内联空间中，它就会被向下推。有谁知道我如何强制蓝色 div 溢出容器的右侧，而不是被推下？我尝试使用溢出属性，但没有任何运气=。我想将左右溢出设置为隐藏，但任何溢出暂时都可以！

HTML：

<div class="date-con">
    <div class="col-md-2 green">

    </div>
    <div class="col-md-2 white-left">

    </div>
    <div class="col-md-2 red">

    </div>
    <div class="col-md-2 white-right">

    </div>
    <div class="col-md-2 blue">

    </div>
</div>

CSS：

.date-con {
    width: 75%;
    height: 250px;
    background-color: lightpink;
    border: 1px solid black;
    margin: 0 auto;
}
.date-con .green {
    width: 24.5%;
    height: 200px;
    background-color: green;
    margin-left: -1.5%;
    position: relative;
    z-index: 100;
    display: inline-block;
}
.date-con .white-left {
    width: 19.83333333333333%;
    height: 150px;
    background-color: #E8E8E8;
    margin-left: -3.1%;
    position: relative;
    display: inline-block;
z-index: 10;
}
.date-con .red {
    width: 23.66666666666667%;
    height: 200px;
    background-color: red;
    margin-left: -3.1%;
    position: relative;
    display: inline-block;
    z-index: 100;
}
.date-con .white-right {
    width: 23%;
    height: 150px;
    background-color: #E8E8E8;
    margin-left: -3.6%;
    position: relative;
    display: inline-block;
    z-index: 10;
}
.date-con .blue {
    width: 25.41666666666667%;
    height: 200px;
    background-color: blue;
    margin-left: -3.5%;
    margin-top: 50px;
    position: relative;
    display: inline-block;
    z-index: 10;
}

这是我的靴子：

http://www.bootply.com/117408

Answer 1

您想要达到的目标有点不清楚 - 所需最终结果的图像会有所帮助。

但为了让.blue 保持内联，您需要应用一个负数margin-right 来补偿宽度溢出。根据您的设计需要的流畅度/响应性，我发现 -1.999% 的最小值适用于宽屏幕，但您可以轻松将其设置为更低。

然后您可以将overflow: hidden 应用于.date-con 元素以剪辑整个区域，如果这是您所追求的。

另外 - 注意空白宽度和子像素宽度四舍五入会影响您在不同屏幕/浏览器/操作系统上的最终结果。