Question

我需要以下布局的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-wrapper需要100％宽
column2-wrapper需要250px宽
column1-wrapper应占用所有可用空间

总之，column1-wrapper应该是100％ - 250px宽，我需要两列看起来像列。

我尝试将float: left添加到BOTH列中。但是这意味着column1-wrapper会失去宽度。在左列中没有包含足够内容的页面上，右列与左列对齐，最终位于页面中间的某个位置：

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

我尝试将float: left添加到LEFT列，将float: right添加到RIGHT列。这使右列与右边缘对齐，但左列未适当拉伸：

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

Answer 1

尝试给浮动：右边的列，右边的列，没有任何东西。不要漂浮它，不要指定大小，只需将你想要的内容放在里面即可。

哦对不起，我忘了：你必须把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>

不确定这是不是你想要的。

Answer 2

Two columns with color

固定流体布局内的宽度

2 个答案: