将侧边栏小部件很好地放置在彼此之下

Question

我们的内容侧边栏布局存在问题，可分解为以下内容。

我们有四个 div，A、B、C 和 D。A 和 C 有文本和图像 - 内容 - 应该放在左边。 B 和 D 是链接列表、搜索表单等 - 侧边栏小部件 - 应放在右侧。

div 在 HTML 中必须按 A、B、C、D 的顺序出现，因为我们希望在小屏幕上也是这样。像这样，侧边栏中的一组快速链接几乎出现在顶部，用户不必为此一直向下滚动。

但是，这给我们带来了在有边栏的大屏幕上定位的问题。因为divB的高度低于divA的高度，而divD必须在之后divC , div D 位置太低。在下面的代码片段中亲自查看。我们希望 div D 从 div B.

的正下方开始

我们知道 div A 的确切高度，但其他 div 是灵活的。所有 div 的宽度都是给定的。有没有一种纯粹的 CSS 方法可以使这些 div 的位置很好？如果没有必要，我们宁愿不使用 JavaScript。当然，这必须跨浏览器工作。

我考虑过使用 CSS 列，但我需要侧边栏不那么宽。

如果有一种方法可以针对不同的屏幕尺寸更改元素的顺序，那就行得通了。但我怀疑如果没有 JavaScript.

是不可能的

div#container {
  width: 100%;
}

div#container div {
  margin-bottom: 20px;
}

div.left {
  float: left;
  width: 70%;
}

div.right {
  float: right;
  width: 26%;
}

div#div-a {
  height: 100px;
  background-color: #000;
}
div#div-b {
  height: 60px;
  background-color: #f00;
}
div#div-c {
  height: 200px;
  background-color: #0f0;
}
div#div-d {
  height: 120px;
  background-color: #00f;
}

<div id="container">
  <div id="div-a" class="left"></div>
  <div id="div-b" class="right"></div>
  <div id="div-c" class="left"></div>
  <div id="div-d" class="right"></div>
</div>

Answer 1

试试这个（删除 float: right 并使用 display: inline-block 和 .right 的 20px 左边距）：

div.right {
    /* float: right; */
    width: 26%;
    display: inline-block;
    margin-left: 20px;
}

将侧边栏小部件很好地放置在彼此之下

Positioning sidebar widgets nicely under each other

html

css

layout

sidebar

two-columns