Question

概述的
我正在尝试创建一个相对简单的页面布局，无论我如何尝试接近它，都会遇到问题。

概念：
- 标准尺寸块布局。我引用单位宽度：每个内容块是240px square，周围有5px的边距 - 固定宽度为1单位的左列（245px - 1块+左边距）。这里没问题。
- 可变宽度的右列以填充剩余空间。这里也没问题。
- 在左列中，固定在列中的多个1unit x 1单元块。顶部还有一些空白 - 再次，不是问题 - 在右栏中：许多标准单位大小的自由浮动块，它们浮动并填充浏览器窗口给它们的空间。这里没问题。
- 最后，一个单位元素，2个单位宽，位于左列的一半，右列的一半，右列中的块仍然浮动。 这里是龙。

See here for a diagram

问题：
无论我如何处理这个问题，都会出错。以下是我现有的解决方案尝试的代码。我目前的问题是右边的1x1块不尊重2x1块，因此2x1块的一半被右侧列中的1x1块覆盖。

我知道这几乎肯定是position: absolute从事流程中解决问题的问题。但是，不能真正找到一种方法，而不是仅仅引发另一个问题。

代码：

<html>
<head>
  <title>wat</title>
  <style type="text/css">
    body {
      background: #ccc;
      color: #000;
      padding: 0px 5px 5px 0px;
      margin: 0px;
    }

    #leftcol {
      width: 245px;
      margin-top: 490px;
      position: absolute;
    }

    #rightcol {
      left: 245px;
      position: absolute;
    }

    #bigblock {
      float: left;
      position: relative;
      margin-top: -240px;
      background: red;
    }

    .cblock {
      margin: 5px 0px 0px 5px;
      float: left;
      overflow: hidden;
      display: block;
      background: #fff;
    }
    .w1 {
      width: 240px;
    }
    .w2 {
      width: 485px;
    }
    .l1 {
      height: 240px;
    }
</head>
<body>
  <div class="cblock w2 l1" id="bigblock">
    <h1>DRAGONS</h1>
    <p>Here be they</p>
  </div>
  <div id="leftcol">
    <div class="cblock w1 l1">
      <h1>Left 1</h1>
      <p>1x1 block</p>
    </div>
  </div>
  <div id="rightcol">
    <div class="cblock w1 l1">
      <h1>Right 1</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 2</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 3</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 4</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 5</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 6</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 7</h1>
      <p>1x1 block</p>
    </div>
  </div>
</body>
</html>

的约束：
最后需要注意的是我需要跨浏览器兼容性，但如果有必要，我很乐意用JS强制执行此操作。也就是说，如果存在仅限CSS的解决方案，我会非常高兴。

Answer 1

在#bigblock：

删除margin-top：-240px
添加margin-left：-240px

然后，将#bigblock放在右栏中，使其成为第5个DIV。

请注意，这只适用于固定宽度的容器。如果你调整浏览器大小，你会看到#bigblock四处移动。

您是否查看了bluprint或960 Grid System等任何CSS框架？它们可以帮助您实现您的目标。

Answer 2

我在列布局方面遇到了同样的问题。我用左边距修正了它：40px;在CSS文件中。另外，不要使用overflow：hidden;这隐藏了列表式圈子。我希望这会有所帮助。

包含跨越列的元素的CSS问题

2 个答案: