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

这是我的bootply：

http://www.bootply.com/117408

Answer 1

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

但为了让.blue保持内联，您需要应用否定margin-right来补偿宽度溢出。根据您的设计需要的流体/响应方式，我发现最大值-1.999％适用于宽屏幕，但您可以轻松将其设置得更低。

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

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

内联列溢出

1 个答案: