Question

我试图完成一个3柱流体布局，底部有一个额外的跨度，覆盖最后两列。另外，我需要使用源排序，以便中间列实际上是标记中的第一列。

我在chrome / safari / firefox中有一个示例小提琴：http://jsfiddle.net/66krg9cr/6/

<div class="container">
  <div class="middle">
    <div style="height: 400px;"></div>
  </div>

  <div class="left">
    <div style="height: 600px;"></div>
  </div>

  <div class="right">
    <div style="height: 200px;"></div>
  </div>

  <div class="bottom"></div>
</div>

* {
  box-sizing: border-box;
}


.container {
  max-width: 90%;
  margin: auto;
  overflow: hidden;
}

.middle {
  width: 48.59114%;
  float: left;
  margin-left: 25.70443%; // push toward the middle
  margin-right: 2.81771%;
  background: #000;

}

.left {
  background: #333;
  margin-left: -77.11328%; // pull towards the left
  width: 22.88672%;
  float: left;
}

.right {
  background: #666;
  width: 22.88672%;
  float: right;
  height: 200px;
  margin-bottom: -9999px; // equal height column trick
  padding-bottom: 9999px;
}

.bottom {
  background: #999;
  width: 77.11328%; // width of the last two columns combined
  float: right;
  height: 200px;
}

不幸的是，我无法使用IE9正常工作。在该浏览器中，底部的2列跨度低于第一列的底部，而不是在其旁边。似乎问题是源排序。如果我更改HTML中的顺序以匹配可视布局，那么IE就会表现出来。它就像IE在第一列向左移动之前记住第一列的高度，并根据该高度布置底部跨度。

我会移动HTML并解决问题，但它正在通过严格的辅助功能/屏幕阅读器审核，我知道我会因为没有主要内容位于源代码顶部而感到厌烦代码。

此外，这些div中的内容在生产中将是动态的，因此我不能依赖于知道任何一列的高度。

非常感谢任何帮助。

Answer 1

为什么不偏离负边缘并将整个事情分解为这样的包装：

HTML：

<div class="container">
    <div class="container-main">
        <div class="top">
            <div></div>
            <div></div>
        </div>
        <div class="bottom"></div>
    </div>
    <div class="container-left">
        <div class="left"></div>
    </div>
</div>

CSS：

* {
    box-sizing: border-box;
}
.container {
    position: relative;
    width: 90%;
    margin: auto;
    overflow: hidden;
}
.container-main {
    position: relative;
    float: right;
    width: 77%;
    margin: 0;
    min-height: 100%;
}
.container-left {
    position: relative;
    float: left;
    width: 23%;
    margin: 0;
    min-height: 100%;
}
.container-main .top {
    width: 100%;
    min-height: 400px;
}
.container-main .top > div:first-child {
    width: 70%;
    float: left;
    background: #000;
    height: 400px;
}
.container-main .top > div:last-child {
    background: #666;
    width: 30%;
    float: right;
    height: 400px;
}
.container-main .bottom {
    background: #999;
    width: 100%;
    height: 200px;
}
.container-left .left {
    background: #333;
    width: 100%;
    height: 600px;
}

您的主要内容仍位于顶部。如果您不必将所有内容都包含在一个包装中，那么这可能会有效，但我无法在较旧的IE版本中对其进行测试，但您可以尝试一下让我知道！

以下是上述行动的小提琴：http://jsfiddle.net/egxfnjzL/

...只是为了好玩，以下是您所拥有内容的精确副本：http://jsfiddle.net/whkqnnyg/

IE9中的负边距和浮点数

1 个答案: