0

レイアウトは次のとおりです。

流体-流体レイアウト

これは基本的に 2 列の流体-流体レイアウトであり、最初の列の仕様は次のとおりです。

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 に答える