Question

考虑到内容div的位置（中间），如何实现这样的div堆叠？

Example

有没有办法用纯CSS进行，或者我必须使用jquery并在大屏幕上移动div内容？

Answer 1

应该能够添加一个浮动：右边的内容，当屏幕宽度达到一定的大小时浮动到菜单，这将使它们并排堆叠。

＆＃13;

@media (min-width: 992px) {
  .menu{
    float:left;
  }
  .content{
    float:right;
  }
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="container-fluid">
    <div class="col-xs-12 col-md-4 menu">
      Menu 1
    </div> 
    <div class="col-xs-12 col-md-6 content">
      Content
      Content
    </div>
    <div class="col-xs-12 col-md-4 menu">
      Menu 2
    </div>
  </div>
</body>

＆＃13;

包含内容的堆栈菜单（大屏幕右侧的内容）

1 个答案: