如何将面板从一行重叠到另一行？

我在不同的行内放置了这些面板。为了方便地显示我的问题，我的期望输出，这里有一个视觉...如何将面板从一行重叠到另一行？

在左边是我遇到的问题，并在右边是所需的输出。我想知道如何使右面板重叠到另一行。

我的HTML的结构是这样的，这毕竟是一个.container液内（如果引起该问题）......

<div class="row"> 
    <div class="col-md-6"> 
     <div class="panel"> <!-- top-left panel --> </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="panel"> <!-- right panel --> </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-6"> 
     <div class="panel"> <!-- bottom-left panel --> </div> 
    </div> 
</div>

我使用的是引导。

p.s.对不起html的“示例”，还不熟悉如何使用html代码段

来源

2016-03-21 user3921890

安置自己的HTML，它不是有趣手动创建它。 – dfsq

你在使用Bootstrap吗？ – ZimSystem

@skelly是的，是的，我是 – user3921890

您可以在一个包装器中编码左侧div，并在右侧编码。

HTML

<div class="row"> 
    <div class="col-md-6"> 
     <div class="panel"> 
      //top left panel 
     </div> 
     <div class="panel"> 
      // bottom left panel 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="panel"> 
      // right panel 
     </div> 
    </div> 
</div>

根据你的视觉上面的html将被罚款，但高度并不在此进行管理。

如果你想有根据左主框，然后使用follwing代码

HTML

<div class="row main"> 
    <div class="col-md-6 inner"> 
     <div class="panel"> 
      //top left panel 
     </div> 
     <div class="panel"> 
      // bottom left panel 
     </div> 
    </div> 
    <div class="col-md-6 inner"> 
     <div class="panel"> 
      // right panel 
     </div> 
    </div> 
</div>

CSS

.main{ 
    display:flex; 
}

来源

2016-03-21 11:15:03

使用flex

右边框的高度相同

.flex{ 
 
    display:flex; 
 
} 
 

 
.flex-1{ 
 
    flex:1; 
 
} 
 

 
.height-50{ 
 
    height:50px; 
 
} 
 

 
.margin-r-15{ 
 
    margin-right:15px; 
 
} 
 

 
.border-1px{ 
 
    border:1px solid black; 
 
}

<div class="flex"> 
 
    <div class="flex-1 margin-r-15"> 
 
    <div class="height-50 border-1px" > 
 
    </div> 
 
    <div class="height-50 border-1px"> 
 
    </div> 
 
    </div> 
 
    <div class="flex-1 border-1px"> 
 
    </div> 
 
</div>

来源

2016-03-21 11:19:25

请尝试这样的：

<div class="row"> 
    <div class="col-md-8"> 
    <div class="row"> 
    <div class="col-md-12"></div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"></div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="row"> 
    <div class="col-md-12"></div> 
    </div> 
    </div> 
    </div>

来源

2016-03-21 11:23:34 satya

如果你可以使用单独的列（如图拉夫的答案），将工作。如果面板的高度未知（可变），这不是一个简单的方法。另一种选择是把所有的的cols在一个单一的row和使用CSS3列宽..

.row { 
    -moz-column-width: 50em; 
    -webkit-column-width: 50em; 
    -moz-column-gap: .1em; 
    -webkit-column-gap: .1em; 
    } 

    .col-md-6 { 
    float:none; 
    display: inline-block; 
    margin: .1em; 
    width: 100%; 
    }

http://www.bootply.com/6ynLAwenzq

来源

2016-03-21 11:37:41 ZimSystem

Please try this: 
<div class="row"> 
    <div class="col-lg-8 col-md-8 col-xs-12 col-s-12"> 
     <div class="col-lg-12 col-md-12"> 
    //Your Content Here 
     </div> 
     <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"> 
      //Your Content Here 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12"> 
     <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"> 
      //Your Content Here 
     </div> 
    </div> 
</div>

来源

2016-03-21 11:50:01

如何将面板从一行重叠到另一行？

回答

相关问题