如何确定浮动元素影响非浮动元素高度的原因（D7 views blocks with zen theme）？

Question

我正在使用 7.x-56 zen 子主题更新基于 D7 构建的网站。主题布局具有响应性水平堆叠的内容区域。我创建了一个自定义博客内容类型，以及基于分类、存档和最近 post 的三个视图块，但我在内容区域内各个块的布局方面遇到了问题。

我想要的是三个博客内容过滤器块堆叠并向右浮动，而博客本身向左浮动。我或多或少做到了这一点，但浮动和清除块以相互堆叠，但我遇到的问题是它们以某种方式影响了第一个博客的高度 post。那么，为什么浮动元素会影响视图行的高度，我该如何解决这个问题？您可以在此处查看该网站的实时版本enter link description here。对于上下文，页面是一个由自定义内容类型构建的视图，过滤器视图使用行高为 -9 的上下文模块放置。我应该在这里添加侧边栏区域吗？或者是否有 css 解决方法？

Answer 1

我会给主要的博客区域一个宽度 %，然后将它向左浮动。对于右侧堆叠的 div，我会将它们全部放在一个 div 中，将 div 浮动到右侧，然后给 div 一个宽度 % .

然后确保将包含这两个 div 的 div 设置为 "overflow:auto";

#main {
  overflow:auto;
}

#left {
  float:left;
  width:65%;
}

#right {
  float:right;
  width:30%;
}

<div id="main">
    <div id="left"></div>
    <div id="right">
        <div id="box-1"></div>
        <div id="box-2"></div>
        <div id="box-3"></div>
    </div>
</div>

如何确定浮动元素影响非浮动元素高度的原因（D7 views blocks with zen theme）？

How to determine why floated elements are affecting the heights of non-floated elements (D7 views blocks with zen theme)?

html

css

zen

drupal-7