2列div布局:右列固定宽度,左侧流体

  • 问题:
  • 其中一列的大小是固定的。不幸的是,无论是在stackoverflow上还是在Google上,我都找不到有效的解决方案。如果我在自己的上下文中实现,那么这里描述的每个解决方案都会失败。目前的解决方案是:

    div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
    }

    #content {
    margin-right: 265px;
    }

    #right {
    float: right;
    width: 225px;
    margin-left: -225px;
    }

    #right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
    }
    <div class="container">
    <div id="content">
    fooburg content
    </div>
    <div id="right">
    test right
    </div>
    </div>

    我得到以下与上述代码:

    |----------------------- -------|
    | fooburg content | |
    |-------------------------------|
    | | test right |
    |----------------------- -------|

    请告知。非常感谢!在

  • 答案:
  • 拆下左立柱上的浮子

    在HTML代码中,右列必须在左列之前

    如果右边有一个浮动(和一个宽度),如果左边的列没有宽度也没有浮动,它将是灵活的:)

    还要对外部div应用一个溢出:hidden和一些高度(可以是auto),以便它包围两个内部div

    最后,在左栏中添加width:autooverflow:hidden,这将使左栏独立于右栏(例如,如果调整浏览器窗口的大小,右栏与左栏相接触,如果没有这些属性,左栏将环绕右栏,有了这些属性,它将保留在它的空间中)

    HTML示例:

    <div class="container">
    <div class="right">
    right content fixed width
    </div>
    <div class="left">
    left content flexible width
    </div>
    </div>

    CSS:

    .container {
    height: auto;
    overflow: hidden;
    }

    .right {
    width: 180px;
    float: right;
    background: #aafed6;
    }

    .left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
    }​​

    示例如下:http://jsfiddle.net/jackJoe/fxWg7/

2列div布局:右列固定宽度,左侧流体

  • 问题:
  • 我的要求很简单:2列,右边的列有固定大小。不幸的是,无论是在stackoverflow上还是在Google上,我都找不到有效的解决方案。如果我在自己的上下文中实现,那么这里描述的每个解决方案都会失败。目前的解决方案是:

    div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
    }

    #content {
    margin-right: 265px;
    }

    #right {
    float: right;
    width: 225px;
    margin-left: -225px;
    }

    #right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
    }
    <div class="container">
    <div id="content">
    fooburg content
    </div>
    <div id="right">
    test right
    </div>
    </div>

    我得到以下与上述代码:

    |----------------------- -------|
    | fooburg content | |
    |-------------------------------|
    | | test right |
    |----------------------- -------|

    请告知。非常感谢!在

  • 答案:
  • 拆下左立柱上的浮子

    在HTML代码中,右列必须在左列之前

    如果右边有一个浮动(和一个宽度),如果左边的列没有宽度也没有浮动,它将是灵活的:)

    还要对外部div应用一个溢出:hidden和一些高度(可以是auto),以便它包围两个内部div

    最后,在左栏中添加width:autooverflow:hidden,这将使左栏独立于右栏(例如,如果调整浏览器窗口的大小,右栏与左栏相接触,如果没有这些属性,左栏将环绕右栏,有了这些属性,它将保留在它的空间中)

    HTML示例:

    <div class="container">
    <div class="right">
    right content fixed width
    </div>
    <div class="left">
    left content flexible width
    </div>
    </div>

    CSS:

    .container {
    height: auto;
    overflow: hidden;
    }

    .right {
    width: 180px;
    float: right;
    background: #aafed6;
    }

    .left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
    }​​

    示例如下:http://jsfiddle.net/jackJoe/fxWg7/