Div在响应式设计中堆叠

我正在创建一个具有固定标题和侧边栏导航的响应式仪表板。我想创建如下所示的模板，但我有与DIV堆积问题：Div在响应式设计中堆叠

相反，我只能让他们栈这样的形象在这里：

我有一个围绕具有以下风格的div的包装：

width: 100%; 
padding: 15px;

divs本身被包裹在一个容器以下样式：

display: inline-block; 
width: 50%; 
padding: 15px; 
float: left; 
vertical-align: top;

显然，垂直对齐：顶部是应该解决这个问题，但我一直没能得到黄格，以正确的位置。任何想法？

来源

2017-08-08 user3857046

你能提供完整的代码（html和css部分）jsfiddle吗？您是否打算使用Bootstrap –

我投票结束这个问题作为题外话题，因为这是一个经常被问到的问题，通过在SO或Google上搜索“石匠”解决方案或https：//masonry.desandro .COM /。 – Rob

可能的重复[如何浮动两列中的文章？]（https://stackoverflow.com/questions/22817038/how-do-i-float-articles-in-two-columns） –

您可以通过Javascript Masonry Grid Layout来实现。

砌体是一个JavaScript网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像镶嵌在墙上的石匠。您可能已经在整个互联网上看到了它的使用。

采用砌体图书馆，它作为这个简单。

<div class="grid"> 
    <div class="grid-item">...</div> 
    <div class="grid-item">...</div> 
    <div class="grid-item">...</div> 
</div>

的Jquery：

$('.grid').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: 200 
});

来源

2017-08-08 15:12:45 gudboisgn

-1

最简单的方法是将黄色和蓝色框与另一个div包裹起来。它工作除非你有媒体查询更改布局很多。另一件事是与colums一起使用flexbox。

来源

2017-08-08 15:10:55

请添加代码而不是提供建议。 – Shiladitya

.wrapper{ 
 
width: 100%; 
 
padding: 15px; 
 
height:100%; 
 
} 
 

 
.floating_div{ 
 
    margin:10px; 
 
    float:left; 
 
    width: 45%; 
 
    height:300px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 

 
.m-t{ 
 
    margin-top:15px; 
 
} 
 

 
.blue_bg{ 
 
    background:blue; 
 
} 
 

 
.green_bg{ 
 
    background:green; 
 
} 
 

 
.yellow_bg{ 
 
    background:yellow; 
 
} 
 

 
.floating_div .inner_div{ 
 
    height:150px; 
 
}

<div class="wrapper"> 
 
    <div class="floating_div"> 
 
    <div class="inner_div blue_bg">Inner Div 1</div> 
 
    <div class="inner_div yellow_bg m-t"> Inner DIv 2</div> 
 
    </div> 
 
    <div class="floating_div green_bg "> 
 
    Left Div 2 
 
    </div> 
 
</div>

这是你正在寻找的一样吗？

这里是JSFiddle

希望这有助于。

来源

2017-08-08 15:12:52

这应该为你做它：

https://jsfiddle.net/hncuyy6o/1/

`<div class="wrapper"> 
    <div class="hai"> 
    <div class="one"></div>  
    <div class="three"></div> 
    </div> 
    <div class="two"></div> 
</div>`

CSS：

.wrapper{ 

width: 100%; 
padding: 15px; 
} 

.hai{ 
    display: inline-block; 
} 
.one{ 
    vertical-align: top; 
    width: 200px; 
    height: 300px; 
    background-color: blue; 
    display: inline-block; 
} 

.two{ 
    vertical-align: top; 
    width: 200px; 
    height: 400px; 
    background-color: red; 
    display: inline-block; 
} 

.three{ 
    width: 200px; 
    height: 300px; 
    background-color: yellow; 
    display: block; 
    position: absolute; 
}

希望有所帮助。

来源

2017-08-08 15:14:33

这不是，我的坏。给我第二个 –

https://jsfiddle.net/hncuyy6o/1/试试 –

我已经做了:) –

Div在响应式设计中堆叠

回答

相关问题