Question

我目前正在进行布局，我必须在图像上使用负边距。图像在<div class="entry-content">内，有填充。为了使entry-content内的图像超出填充范围，我使用负边距。要在我使用<div class="entry-content">的{{1}}之外展开图片。

这不能按预期工作 - 100％似乎是图像的宽度而不是width:calc(100%+margin)的宽度。我希望图像的宽度相对于entry-content，因为图像将用于响应式布局。

我目前处于这个过程的早期阶段，所以entry-content上的宽度仍有固定宽度。

HTML

body

CSS

<!-- 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>

Answer 1

MDN calc()：

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

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

因此，它应该是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>

宽度：img上的calc（）与父容器无关

1 个答案: