0

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

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

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

然而，这给我们在有侧边栏的大屏幕上定位带来了问题。因为 div B 的高度低于 div A 的高度，并且 div D 必须在div C 之后，所以 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>

4

1 回答 1

1

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

div.right {
    /* float: right; */
    width: 26%;
    display: inline-block;
    margin-left: 20px;
}
于 2015-01-30T23:20:08.630 回答