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

Question

試圖在設計中整理一個博客，並需要一種更穩定的方式來做到這一點。

目前我的布局是例如

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

我在5％的blogtext div上有一個填充，因此博客內容周圍有一些漂亮的空白區域。 但是，我希望圖像是div的全寬。

博客數據全部取自一個數據庫字段，然后轉換為HTML（當前保存為BBCODE），然后將其作為單個變量回顯，例如$ text

我已經完成了我目前所做的事情。 我將圖像標記設置為比包含div更寬，然后使用減去邊距定位它。 但這對我來說似乎有些苛刻。 一旦移動屏幕res我可以想象結果略有不同。

繼承人fifdel： 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樣式，因為您正在使用百分比。