0

这是布局：

流体-流体布局

它本质上是一个两列流体-流体布局，第一列的规格是：

width: 30%;
min-width: 200px;
max-width: 300px;

列的高度应该是同步的，但不是一个恒定值。

作为记录，我尝试使用表格和表格单元显示，但 Firefox、Safari 和 Chrome 忽略了表格单元的最大宽度，因此该解决方案不起作用。

4

1 回答 1

1

以下是我制定的解决方案。在我的测试服务器上看到它。

因为您想同时使用像素值和百分比，所以您固有地将百分比限制在您使用像素值定义的范围内。例如，这意味着当左列最小（200px）时，这等于 30% 并强制剩余的 70% 为 466px。这只是同时使用像素值和百分比的限制......但这是我在不使用 Javascript 的情况下得到的最好的。

希望这可以帮助！

<head>
  <title>twoColumn</title>
  <style type="text/css">

    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    div.wrap {
      background-color: yellow; /* for illustration's sake */
      margin: 0 auto; /* to center it all, for illustration's sake */
      min-width: 700px;
      max-width: 1000px;
      overflow: hidden; /* to hide the overrun from the 3000px of faux-column padding*/
    }

    div.column1 {
      background-color: blue; /* for illustration's sake */
      width: 30%;
      max-width: 300px;
      min-width: 200px;
      float: left;
      margin: 0 -30% -3000px 0; /* to offset the faux-column padding */
      padding-bottom: 3000px; /* to create a faux-column appearance after the left column's content */
    }

    div.column2 {
      float: right;
      width: 70%;
    }

    .clear {
      clear: both;
    }

  </style>
</head>

<body>
  <div class="wrap">

      <div class="column1">
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1
      </div> <!-- end .column1 -->

      <div class="column2">
        column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 colunn2
      </div> <!-- end column 2 -->

      <div class="clear"></div>

  </div> <!-- end .wrap -->
</body>

于 2013-02-23T20:43:10.040 回答