如何设置具有最大宽度但仅从一侧设置的容器？

Question

我的容器是这样的：

.container{
    width: 100%;
    max-width: 1254px;
    margin-left: auto;
    margin-right: auto;
}

然后我需要一个容器，它与左边的边距相同，但从右边应该有 none.

我尝试过类似的方法，但不幸的是它不起作用。

 .containerFromLeft {
    width: 100%;
    max-width: 1254px;
    margin-left: auto;
    margin-right: 0;
}

Answer 1

你可以像下面那样做。我在演示中使用 500px，但您可以将其替换为您的宽度

.container {
  height: 100px;
  background: red;
  margin-left: max(0px, (100% - 500px)/2); /* what you need */
}


/* to compare with the classic configuration */
.box {
  height: 100px;
  background: green;
  max-width:500px;
  margin:auto;
 }

<div class="container"></div>

<div class="box"></div>

如何设置具有最大宽度但仅从一侧设置的容器？

How to set container with max-width but only from one side?

html

css

sass