javascript - 使 div 比其容器更宽的更简单的方法

Question

试图整理我正在设计的博客，需要一种更稳定的方式来完成这项工作。

目前我的布局是例如

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

我在 blogtext div 上填充了 5%，这样博客内容周围就会有一些漂亮的空白。但是，我希望图像是 div 的全宽。

博客数据全部取自一个数据库字段，然后转换为 HTML(当前保存为 BBCODE)，然后作为一个变量输出，例如$文字

我对我目前所做的做了一个 jsfiddle。我将图像标签设置为比包含的 div 更宽，然后使用负边距定位它。但这对我来说似乎有点老套。一旦在屏幕分辨率上移动，我可以想象结果会略有不同。

这是 fiddle :http://jsfiddle.net/AwneN/

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

Answer 1

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

* { 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;
}

http://jsfiddle.net/AwneN/

您可能需要查看 box-sizing 样式，因为您使用的是百分比。