Question

我正在使用以下布局的网站上工作： http://i.imgur.com/EyhNL4s.png

信息;

红色标记是一个（固定的）侧杆，它应该折叠/折叠移动。
其他块只是具有可变高度的div。

现在我想知道创建它的最佳方法是什么。我尝试了几个，从将内容（变量高度div）放在一个包装器中开始，给出了一个浮点数：左边（试图）使用jQuery Masonry。到目前为止，两种方式都是不成功的。出于某种原因，我的div不会彼此相邻。

根据我的设计，这些是我使用的div的高度;

#green {
    height: 312px;
}

#blue {
    height: 752px;
}

#orange {
    height: 876px;
}

#purple {
    height: 618px;
}

#yellow {
    height: 876px;
}

有人能把我送到正确的方向吗？

编辑;我忘了提到的是，当我将屏幕缩小时，内容块应该放在彼此之下。（边栏应该会崩溃，但我会稍后调查这个'问题'。）

Answer 1

您可以尝试创建2个父元素。像.sidebar和.content之类的东西。然后，您可以在每个上使用float: left浮动这些。

您的HTML看起来类似于：

<div class="sidebar">
  <div id="red"></div>
</div>
<div class="content">
  <div id="green"></div>
  <div id="orange"></div>
  <div id="purple"></div>
</div>
<div class="sidebar">
  <div id="blue"></div>
  <div id="yellow"></div>
</div>

您的CSS看起来像：

.sidebar,
.content {
  float: right;
}

另一种解决方案可能是使用flexbox。为此，您应该在侧边栏和内容周围创建另一个父元素。这样的CSS看起来像（不再需要以前的CSS）：

.parent {
  display: flex;
  flex-direction: column;
}

.sidebar,
.content {
  width: 33%; // Or however wide you need these 
}

我希望有所帮助！

侧栏+两列不同高度的布局方式？

1 个答案: