Question

示例HTML / CSS：

＆＃13;

.wrapper {
  width: 100%;
}
.container {
  width: 400px;
  margin: 0 auto;
  border: 1px solid;
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div>
  </div>
</div>

＆＃13;

如果有机会将.element的左边缘移动到.wrapper的左边缘，而其右边缘会保持对齐.container的右边缘。换句话说，我想通过向.container添加一些规则来覆盖.element的左边距。我尝试过类似的事情：

.element {
  margin-left: -100%
}

但正如我所料，它移动了整个元素。

Answer 1

您可以将元素绝对相对定位到.wrapper，然后使用calc()来确定50% - 200px是什么：

Example Here - 为演示目的添加了边框..

＆＃13;

.wrapper {
  width: 100%;
  position: relative;
}
.container {
  width: 400px;
  height: 60px;
  margin: 0 auto;
  border: 2px solid;
}
.element {
  position: absolute;
  left: 0;
  right: calc(50% - 200px);
  border: 2px solid #f00;
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div>
  </div>
</div>

＆＃13;

Answer 2

您可以设置一个位置，但是您需要使用javascript来计算正确的宽度。

.element {
    position:absolute;
    left:0;
}

JQuery的

$( document ).ready(function() {
    var w = ($(".container").outerWidth()/2) + $(".container").width();
    $(".element").width(w);
});

使元素移出容器

2 个答案: