固定宽度

问题描述：

我需要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％全
需求是250像素宽
column1-wrapper应采取一切可用空间

综上所述，column1-wrapper守ld是100％ - 250px宽，我需要两列看起来像列。

我已经尝试将float: left添加到BOTH列中。但是这意味着column1-wrapper失去其宽度。在不包含在左侧栏中足够的内容页面，右边一列赞同左栏，并在页面中间的某个结束：

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

我已经尝试添加float: left到左栏float: right转右栏。这对准右侧立柱与右边缘，但是左边的列不能适当地舒展：

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

答

Two columns with color。

这不是流畅的，除非我失去了一些东西 –

你一定错过了一些东西。这里很流畅。与你的问题只有不同之处在于它不是100％宽，而且它是正确的列，而不是左边的列。但如果你在最后一步之后看起来很正确，那么实际上有两种变化。一个为100％宽，另一个为在另一边有一个列:) – Svish

嗯，它需要我重新排列列的顺序......即正确的内容应放置在*主要内容之前，这会干扰现有页面中的HTML + ASP代码。 –

答

先给浮动：右右列和什么都没有到左边。不要浮动它，不要指定大小，只要把它想要的内容放在它里面就是了。

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

不知道这是你以后。

为此，我首先必须在源代码顺序中将右侧div放在左侧div上，但这会产生另一个问题......如果左侧列较高，则其某些内容将置于右侧列之下。 –

我删除了一个较早的，我做过的迟缓评论。对不起，没有解决方案。 –

相关推荐