将容器放置在容器外部

我正在努力研究如何使其发挥作用。将容器放置在容器外部

我有一个wide-header div内的图像。这是一个响应式标题，因此将图像设置为width:100%以使标题调整为其容器的大小。

问题是，图像需要全宽，但容器的两边都有10px的边距。

HTML 无法更改，因为它基于CMS。旗帜必须坐在里面region-content与它的10px两侧

我已经成功地设法通过使用图像上的position:relative，并把它left:-10px反击左侧差距将图像推到最左边的页边。

问题我正在做的是在相反的一面，因为我不能扩大宽度。横幅广告需要宽度为20px ...但它的设置基于百分比宽度，因此只需添加20px就行不通了。

基本上我需要弄清楚如何让它工作为100％+ 20px。

这是移动的，所以border-box:box-sizing可以使用，但我不能正确使用这个，虽然我相信一个解决方案可能需要它。

JS Fiddle

HTML

<div id="region-content"> 
    <div class="content"> 
      <!-- HEADER IMAGE --> 
      <div id="wide-header"> 
       <img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt=""> 
      </div> 
    </div> 
</div>

CSS

body{margin:0 auto;} 

#region-content{ 
margin-left: 10px; 
margin-right: 10px; 
    outline:1px solid red; 
} 

#wider-header{ 
width: 100%; 
box-sizing: border-box; 
overflow: hidden; 
max-height: 300px; 
text-align: center; 
background-color: #333; 
} 

#wide-header img { 
width: 100%; 
height: auto; 
margin: 0 auto; 
max-width: 1300px; 
    position:relative; 
    left:-10px; 
}

来源

2013-05-09 Francesca

试试这个：

#wide-header img { 
height: auto; 
margin: 0 -10px; 
max-width: 1300px; 
}

另一种值得考虑的方法是使用背景图像。例如。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

body{margin:0 auto; 
    background-image: url(http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 0; 
} 

#region-content{ 
margin-left: 10px; 
margin-right: 10px; 
outline:1px solid red; 

min-height: 600px; 
} 

#wider-header{ 
width: 100%; 
box-sizing: border-box; 
overflow: hidden; 
max-height: 300px; 
text-align: center; 
background-color: #333; 
} 


</style> 

</head> 
<body> 

<div id="region-content"> 
    <div class="content"> 
     <div id="wide-header"> 
     </div> 
    </div> 
</div> 
</body> 
</html>

来源

2013-05-09 09:53:54

如果你没有打扰约旧版本的IE浏览器，你可以试试这个方法：

width: calc(100% + 20px);

JSFIDDLE

来源

2013-05-09 09:55:39 Andrew

谢谢，刚发现这个我自己。我正在检查是否需要Opera和Android Browser，因为它们不支持此操作。 – Francesca 2013-05-09 09:56:22

这是一个链接到什么浏览器支持它：http：//caniuse.com/calc – Andrew 2013-05-09 09:58:48

如果你想增加宽度超过100％。尝试宽度：105％;看到这个editted fiddle其同样为100％+ 20像素

width:105%;

来源

2013-05-09 09:59:14 bot

另一种方法是做到以下几点（虽然你可能要看看＃里面的其他内容的宽头）

position:relative; 
left:-10px;

到

position:absolute; 
left:0; 
right:0;

我已经更新了你的提琴http://jsfiddle.net/zr8xp/3/

来源

2013-05-09 09:59:53 user2319914

我加入一些CSS修改更新jsfidle：链接：http://jsfiddle.net/zr8xp/8/

CSS：

body{margin:0 auto;} 

#region-content{ 
margin-left: 10px; 
margin-right: 10px; 
    outline:1px solid red; 
} 

#wider-header{ 
width: 100%; 
box-sizing: border-box; 
overflow: hidden; 
max-height: 300px; 
text-align: center; 
background-color: #333; 
padding-left: 10px; 
padding-right: 10px; 
} 

#wide-header img { 
width: 100%; 
height: auto; 
margin: 0 auto; 
max-width: 1300px; 
    position:relative; 

}

HTML：

<div id="region-content"> 
    <div class="content"> 
      <!-- HEADER IMAGE --> 
      <div id="wide-header"> 
       <img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt=""> 
      </div> 
    </div> 
</div>

来源

2013-05-09 10:01:13 Romain

我通过把我的IMG在这样做一个DIV并设置div样式：float：right; width：0px; overflow：visible;

这创建了图像的主要内容div的权利，超出我的标题和其他内容的宽度。

来源

2013-10-31 21:11:31 todji

将容器放置在容器外部

回答

相关问题