將容器放置在容器外部

我正在努力研究如何使其發揮作用。將容器放置在容器外部

我有一個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

將容器放置在容器外部

回答

相關問題