Question

我正在尝试使用主要内容区域创建一个站点布局，右侧是边缘列。主要内容下方可能会有更多元素，通常与主要内容的宽度相同。但现在应该可以在这个区域创建更宽的元素，边缘列应该自动回流。

简而言之，我想要实现的目标就像this

body,
html {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
div.content-area {
  outline: 3px solid black;
  margin: 6px;
  padding: 5px;
}
#main {
  width: 200px;
  float: none;
  min-height: 250px;
  display: inline-block;
}
div.marginal {
  height: 100px;
  width: 250px;
  float: right;
  background-color: #f1f1f1;
  clear: both;
}
div.content-module {
  width: 200px;
  height: 100px;
  float: none;
  display: inline-block;
}
div.content-module.wide {
  width: 400px;
}

<!DOCTYPE html>
<html>

<head>
  <title>This is how it should look like</title>
</head>

<body>
  <div style="width: 500px; height: 90%;">
    <div class="marginal content-area">Marginal module</div>
    <div class="marginal content-area">Marginal module</div>
    <div class="marginal content-area">Marginal module</div>

    <div id="main" class="content-area">
      Main Area
    </div>

    <div class="content-module content-area">Content</div>
    <div class="content-module content-area wide">Content wide</div>

    <!-- Following div will be above, where the other marginal divs are -->
    <div class="marginal content-area">Marginal module</div>

    <div class="content-module content-area">Another content</div>
  </div>
</body>

</html>

...显示的HTML代码为here。

<body>
  <div style="width: 500px; height: 90%;">
    <div class="marginal content-area">Marginal module</div>
    <div class="marginal content-area">Marginal module</div>
    <div class="marginal content-area">Marginal module</div>
    <div class="marginal content-area">Marginal module (should appear under 'Content wide')</div>

    <div id="main" class="content-area">
      Main Area
    </div>

    <div class="content-module content-area">Content</div>
    <div class="content-module content-area wide">Content wide</div>
    <div class="content-module content-area">Another content</div>
  </div>
</body>

我的第一次尝试就是删除明确：两者;来自边缘模块的风格。但这会导致边缘元素并排排列。但他们必须在彼此之下。

知道如何实现这样的目标吗？

用更宽的元素中断右浮动边缘柱

0 个答案: