引导，跨越两行的图像，同时保留响应

我有两行，上半部分和下半部分都包含两个单独的背景渐变。行被分成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

帮了一下，谢谢！ –

引导，跨越两行的图像，同时保留响应

回答

相关问题