引導，跨越兩行的圖像，同時保留響應

我有兩行，上半部分和下半部分都包含兩個單獨的背景漸變。行被分成50％寬的列，最右邊的列包含內容，最左邊的列包含單個圖像。

我的問題是，我不確定如何獲取元素垂直跨兩行，同時仍保留它的流動佈局。我已絕對定位它，但一旦窗口縮小，它就不能正確堆疊。我的佈局如下。擺脫行並將頁面分成兩個垂直列會導致我不確定如何將背景分成兩個單獨的水平漸變。任何幫助，將不勝感激。謝謝！

<div class="row" style="height:50%;background-image:-webkit-gradient(etc)"> 
    <div class="col-md-6"> 
    <img src="wooo-im-an-image"> 
    </div> 
    <div class="col-md-6"> 
    content of a mostly blabberous nature here 
    </div> 
</div> 
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)"> 
    <div class="col-md-6"> 
    emtpy 
    </div> 
    <div class="col-md-6"> 
    more content of a mostly blabberous nature here 
    </div> 
</div>

來源

2014-02-26 Joe Jenkins

你申請的DIV類'row'任何'margin'或''填充，如果是的話那麼你不應該使用'50％'來根據您給出的邊距或填充值，類'row'將其改爲'49％'或'48％'。 –

沒有填充或邊距。我主要關心的是讓圖像跨越頂行和底行之間的邊界，同時保持響應。 –

我不確定我是否理解，但我確實使用了您的照片。請原諒CSS技巧，讓我知道它是否對你有幫助。

<div class="row gradient"> 
    <div class="col-md-6"><div class="well inheritback">IMG<br><br><br><br><br></div></div> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-md-12"><div class="well inheritback">CONTENT</div></div> 

     </div> 
     <div class="row"> 
      <div class="col-md-12"><div class="well inheritback">CONTENT</div></div> 

     </div> 
    </div> 
</div>

現場演示

http://www.bootply.com/116896

來源

2014-02-26 13:51:42 Thunda

幫了一下，謝謝！ –

引導，跨越兩行的圖像，同時保留響應

回答

相關問題