Question

试图在设计时整理一个博客，并需要一种更稳定的方式来实现这一目标。

目前我的布局是例如。

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

我在5％的blogtext div上有一个填充，因此博客内容周围有一些漂亮的空白区域。但是，我希望图像是div的全宽。

博客数据全部取自一个数据库字段，然后转换为HTML（当前保存为BBCODE），然后将其作为单个变量回显，例如： $文本

我已经做了我目前所做的事情。我将图像标记设置为比包含div更宽，然后使用减去边距定位它。但这对我来说似乎有些苛刻。一旦移动屏幕res，我可以想象结果略有不同。

继承人fiddel：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样式，因为您正在使用百分比。

使用比容器更宽的div的方法

1 个答案: