中心左边距但右边距100％视口（到最后）

Question

我一直面临一个我难以解决的问题。

基本上，我想在边距0自动的左侧位置开始div并在视口的边缘完成。请参阅下图以帮助说明这一点。

HTML的基本位是......

<div style="max-width:500px; margin: 0 auto;">
  <div> <!-- needs to start at left margin and stretch to 100% of viewport -->
    <ul>
     <li></li>
    </ul>
   </div>
</div>

任何帮助将不胜感激！

感谢

Answer 1

是的，这是可以实现的。但是，在使用calc之前，请记住它是CSS 3并附带some usability limitations（没有IE8，没有Opera Mini）。

.container {
  max-width: 500px;
  margin: 0 auto;
}
.container > div {
  margin-top: 20px;
  min-height: 200px;
  background-color: #ccc;
}
.container > div > ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
.container > div > ul > li {
  padding: 10px;
  list-style-type: none;
}
.container > div > ul > li:nth-child(2) {
  width: calc(((100vw - 100%) / 2) + 100%);
  background-color: red;
  min-height: 30px;
  color: white;
  box-sizing: border-box;
  text-align: right;
}

<div class="container">
  <div>
    <!-- needs to start at left margin and stretch to 100% of viewport -->
    <ul>
      <li>first li</li>
      <li>second li</li>
    </ul>
  </div>
</div>

大部分CSS都是为了让它看起来像你的照片。但模型是：

.grand-parent {
    width: {some-fixed-width}; // 500px in our case
    margin: 0 auto;
    position: relative;
    padding-left: 0;
    padding-right: 0;
}
.parent {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.child {
    width: calc(((100vw - 100%) / 2) + 100%);
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

它们中的一些甚至不存在于我的上述代码中，因为它们是默认值，但它们对于此工作非常重要。如果您决定在父级上使用一些填充，则必须在子级中进行补偿，在calc（100%变为100% + left-padding of parent + right-padding-of-parent）和左侧保证金（negative left margin of parent）。但是，为了简单起见，不要在父级上使用左右边距或填充。 ：））

jsFiddle here。

Answer 2

参见示例：jsFiddle

HTML：

<div class="abc">
  <div class="new">
    <ul>
      <li>123</li>
    </ul>
  </div>
</div>

CSS：

.abc{width:500px; margin: 0 auto; background:#ccc; overflow:hidden; height:500px;}
.new{width:100%; background:#ff0000;}

Answer 3

您可以使用以下代码：

routeSequence.route = ?

但仍然无法实现。您必须使用javascript来计算需要与视口右侧位置一起放置的div的宽度。应用绝对位置和右侧0将使其向右移动。只需要处理宽度计算。