1

我目前正在开发一个布局，我必须在图像上使用负边距。图像在里面<div class="entry-content">，里面有一个填充。为了使里面的图像entry-content超出填充，我使用负边距。要将图像拉伸到<div class="entry-content">我使用 的width:calc(100%+margin).

但这并没有按预期工作 - 100% 似乎是图像的宽度而不是entry-content. 我希望图像的宽度相对于entry-content，因为图像将用于响应式布局。

我目前处于这个过程的早期阶段，所以我仍然有一个固定的宽度body。

HTML

<!-- other unrelated code such as header-->
<div class="entry-content">
    <p>
        <img src="http://www.hellothere.se/blog/wp-content/uploads/2014/11/TKD-Promo-title-940x400.jpg" />
    </p>
</div>

CSS

body {
  width: 340px;
}

.entry-content{
  padding: 0 0.75em;
  position: relative;
}

.entry-content img {
  display: block;
  margin: 0 -0.75em;
  width: calc(100%+0.75em);
}
4

1 回答 1

4

MDNcalc()：

+and-运算符必须始终被空格包围。例如的操作数calc(50% -8px)将被解析为百分比后跟负长度、无效表达式，而 的操作数calc(50% - 8px)是百分比后跟减号和长度。更进一步，calc(8px + -50%)被视为一个长度，后跟一个加号和一个负百分比。*and/运算符不需要空格，但允许并建议添加空格以保持一致性。

+运算符必须被空格包围。

因此应该是width: calc(100% + 0.75em)而不是calc(100%+0.75em)

body {
    width:340px;
}
.entry-content {
    padding: 0 0.75em;
    position:relative;
}
.entry-content img {
    display:block;
    margin: 0 -0.75em;
    width: calc(100% + 0.75em);
}
<div class="entry-content">
    <p>
        <img src="//placehold.it/200" />
    </p>
</div>

于 2015-02-12T21:25:45.617 回答