gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 04:09:27 24 4
gpt4 key购买 nike

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

目前我的布局是例如

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

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

最佳答案

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

* { 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 样式,因为您使用的是百分比。

关于javascript - 使 div 比其容器更宽的更简单的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20891065/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com