How to increase width of child element beyond parent element


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

我想尝试这样的博客:

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

But what I get is

但我得到的是

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

(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 个解决方案

#1


1  

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的两侧添加负边距以弥补宽度差异。

#2


1  

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.

根据您的问题的要求:您可以负面应用保证金值,例如margin-left:15px;并给出位置:亲属;你可能需要定义你的样式float:left;太。

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;完成你的工作。

#3


1  

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

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

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

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

智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告