Javascript 使div比容器更宽的不太老套的方法

试图整理我正在设计的博客，需要一种更稳定的方式

目前我的布局是

<div id="blog">
    <div id="blogtext">
    IMAGES AND TEXT BLAH
    </div>
</div>

图像和文本等等

我在blogtext div上有一个5%的填充，这样在blog内容周围就有了一些不错的空白。但是，我希望图像是div的全宽

博客数据全部取自一个数据库字段，然后转换为HTML（当前保存为BBCODE），然后作为一个变量（例如$text）进行回显

我已经对我目前所做的做了一个粗略的描述。我将图像标记设置为比包含的div宽，然后使用负边距定位它。但我觉得这有点不对劲。一旦在屏幕上移动，我可以想象结果会略有不同

这是小提琴：

---

对此有更好的建议吗？还是我应该坚持下去？

你所做的没有错，但你也可以这样做：

* { box-sizing: Border-box; } //http://www.paulirish.com/2012/box-sizing-border-box-ftw/

#content * {
    padding: 5%;
}

#content #image {
    margin-top: 5%;
    height: 200px;
    padding:0; //Reset padding for images
    background-color: #fefefe;
}

---

由于您使用的是百分比，您可能需要查看

框大小调整

样式。

为什么图像必须位于内容标签内？如果你为文本和图像制作一个单独的容器，你就不必尝试将子容器制作得比父容器大，对吗？内容是用户以论坛的形式提交的，其中会有文本、图像、更多文本等。我不确定为什么这意味着你不能将它们放在单独的容器中。。。示例-p标记中的每一位文本内容，允许您在p标记和img标记之间分离样式规则。您测试过这个吗。。。不起作用文本不在另一个标记中。而且你的小提琴与OP问题完全相同