Div响应式设计

Question

我正在创建一个带有固定标题和侧边栏导航的响应式信息中心。我正在尝试创建下面描述的模板，但是我遇到了div堆叠的问题：

相反，我只能像这张图片一样堆叠它们：

我有一个包含div的包装器，它具有以下样式：

width: 100%;
padding: 15px;

div本身包含在具有以下样式的容器中：

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

显然，vertical-align：top应该可以解决这个问题，但是我无法将黄色div放到正确的位置。 有什么想法吗？

Answer 1

.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

希望这有帮助。

Answer 2

这应该适合你：

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;
}

希望有所帮助。

Answer 3

实现这一目标的最简单方法是用另一个div包装黄色和蓝色框。 它可以工作，除非你有媒体查询更改布局。另一件事是使用带有colums的flexbox。

Answer 4

您可以Javascript Masonry Grid Layout来实现这一目标。

Masonry是一个JavaScript网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石膏在墙上贴合石头。你可能已经在互联网上看到过它。

使用Masonry Library，这很简单。

<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
});