1

次のレイアウトのCSS定義が必要です。

<div id="middle-wrapper">
  <div id="column1-wrapper">
    This has to be 100% - 250px wide
  </div>
  <div id="column2-wrapper">
    This has to be 250px wide
  </div>
  <!-- no other markup in middle-wrapper except maybe a clearing div -->
</div>
  • middle-wrapper100％幅である必要があります
  • column2-wrapper幅250pxである必要があります
  • column1-wrapper利用可能なすべてのスペースを取る必要があります

要約すると、column1-wrapper幅は100％〜250ピクセルである必要があり、両方の列が列のように見える必要があります。

float: left両方の列に追加してみました。ただし、これはcolumn1-wrapper幅が狭くなることを意味します。左側の列に十分なコンテンツが含まれていないページでは、右側の列が左側の列に揃えられ、ページの中央のどこかになります。

----------------------------------------------------------------
| LEFT NO WIDTH COLUMN|| RIGHT 250 PX|
----------------------------------------------------------------

float: leftLEFT列とfloat: rightRIGHT列に追加してみました。これにより、右の列が右の端に揃えられますが、左の列は適切に伸びません。

----------------------------------------------------------------
| LEFT NO WIDTH COLUMN|                          | RIGHT 250 PX|
----------------------------------------------------------------
4

2 に答える 2

2

float:right を右の列に指定し、左の列には何も指定しないでください。浮かせたり、サイズを指定したりせず、必要なコンテンツを中に入れるだけです。

すみません、忘れてしまいました: column2をcolumn1内に配置する必要があります

ええ、これはうまくいきます：

<html>
<head>

<style>
    div#column1-wrapper {
        width: 100%;
    }

    div#column1-wrapper {
    }

    div#column2-wrapper {
        float: right;
        width: 250px;
    }
</style>
</head>
<body>
    <div id="middle-wrapper">
    <div id="column1-wrapper">
        <div id="column2-wrapper">  <!-- Must be first -->
            This has to be 250px wide
        </div>
        This has to be 100% - 250px wide
    </div>
</div>
</body>
</html>

それがあなたが求めているものかどうかはわかりません。

于 2009-11-23T07:49:02.873 に答える
1

color の 2 つの列。

于 2009-11-23T08:08:16.493 に答える