html - 内联列溢出

Question

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

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

这是我的bootply:

http://www.bootply.com/117408

Answer 1

您不太清楚您要实现的目标 - 期望最终结果的图像会有所帮助。

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

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

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