How to increase width of child element beyond parent element

I am trying to get something like this blog which has:


But what I get is


(I am not trying to copy him, obviously I will change the image, etc.)


The borders are getting cut, because the width of the parent container (sidebar) is less than the width of the image. I google a lot, but all I found is overflow:visible, which somehow is still not working. Here is the output.


3 个解决方案



In two easy steps :


  1. Remove overflow: hidden; from .sidebar .widget.
  2. 删除溢出:隐藏;来自.sidebar .widget。

  3. Add negative margin on the both sides of .sidebar h2 to make up for the width difference.
  4. 在.sidebar h2的两侧添加负边距以弥补宽度差异。



As per your question's requirement: you could apply the margin value negatively, for example margin-left: 15px; and give position: relative; and you may need to define your style float: left; too.


But alternatively, you could define your parent element greater than your contents, for example, your contents is 200 pixels wide and your left and right image is 15 pixels + 15 pixels = 30 pixels, then your parent element should be 230 pixels wide and now arrange your elements by giving the floating value to the left for all three images and define the contents width now to 200 pixels and center it giving margin: 0 auto; to accomplish your work.

但另外,你可以定义你的父元素大于你的内容,例如,你的内容是200像素宽,你的左右图像是15像素+15像素= 30像素,那么你的父元素应该是230像素宽,现在通过为所有三个图像赋予左侧浮动值来排列元素,并将内容宽度现在定义为200像素并将其居中给予边距:0 auto;完成你的工作。



Try assigning a negative value to the margin of the desired element (for example, {margin-left: -20px }).


Don't forget to remove the overflow property from the parent element.





粤ICP备14056181号  © 2014-2020