如何增加子元素的宽度超出父元素

Question

我正在努力获得this blog之类的内容：

http://img.ctrlv.in.s3.amazonaws.com/img/516a730196dde.jpg

但我得到的是

http://img.ctrlv.in.s3.amazonaws.com/img/516a735b22116.jpg

（我不是想复制他，显然我会改变图像等）。

边框正在被切割，因为父容器（侧边栏）的宽度小于图像的宽度。我谷歌很多，但我找到的只是overflow:visible，它仍然无法正常工作。这是output。

Answer 1

尝试将负值分配给所需元素的边距（例如，{margin-left: -20px }）。

不要忘记从父元素中删除overflow属性。

Answer 2

通过两个简单的步骤：

1. 从overflow: hidden;移除.sidebar .widget。
2. 在.sidebar h2的两边添加负边距以弥补宽度差异。

Answer 3

根据您的问题的要求：您可以负面应用保证金值，例如margin-left: 15px;并提供position: relative;，您可能需要定义您的风格{{1}也是。

但是，你可以定义你的父元素大于你的内容，例如，你的内容是200像素宽，你的左右图像是15像素+15像素= 30像素，然后你的父元素应该是230像素宽，现在通过给所有三个图像左边的浮动值来排列你的元素，并将内容宽度现在定义为200像素，并使其居中，使float: left;完成你的工作。