Question

我有div以水平为中心。这在宽屏幕上非常棒，但是如果您拉动浏览器窗口更窄，它会移动到左侧上的另一个div下面但是那里有正确仍然是空的空间。我希望当它击中其他div时停止居中。例如margin auto但左侧的min margin 300px 。

据我所知，没有这样的事情。但有没有办法实现这一结果？

谢谢。

Answer 1

你可以试试这个，使用300px作为

以下的最小边距

css代码

html,body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}
.left {
    width: 200px;
    height: 100%;
    background: red;
    float: left;
}        
.right-inner {
    width: 300px;
    height: 300px;
    background: blue;
    left: -500px; /*  -(200px+300px)  */
    position: relative;
    margin: auto
}
.right {
    width: calc(100% - 1000px); /* 100% - (200px+300px)*2 */
    left: 1000px; /*  (200px+300px)*2 */
    position: absolute;
}

Html代码

<div class="left"></div>
<div class="right">
    <div class="right-inner"></div>
</div>

如果左边部分的宽度是leftWidth，而你的最小边距是minMargin，则右边元素的宽度是rightWidth

rightWidth = calc（100％ - （leftWidth + minMargin）* 2）
rightLeft =（leftWidth + minMargin）* 2
rightInnerLeftOffest = - （leftWidth + minMargin）

总之，我只使用绝对元素的左边来制作minMargin，并使用margin：auto + position：相对于右边内部元素的中心。我希望你能理解我所说的，创建一个新的html页面将有助于你明白我的观点

媒体查询也可以帮助你做这件事eazy

中心div直到左边距太窄，然后停止？

1 个答案: