div css自适应宽度，两栏，右侧定宽，左侧自适应

html-css021

div css自适应宽度，两栏，右侧定宽，左侧自适应,第1张

HTML

<div class="g-bd2 f-cb">

    <div class="g-mn2">

        <div class="g-mn2c">

            <p>左侧自适应</p>

        </div>

    </div>

    <div class="g-sd2">

        <p>右侧定宽</p>

    </div>

</div>

/* 两列左侧自适应布局 */

.g-bd2{margin:0 0 10px}

.g-sd2{position:relativefloat:rightwidth:230pxmargin-left:-230px}

.g-mn2{float:leftwidth:100%}

.g-mn2c{margin-right:240px}

详细可查看

http://nec.netease.com/library/category/#grid

根据那个网站的CSS代码改的.

<style>

#maincol {

float: left

width: 68%

font-size: 100%

border-right: 1px solid #000

margin-right: 0px

background-color:#0033FF

}

#maincol .col{

width: 100%

border: none

}

#subcol {

float: right

width: 32%

background-color:#FF0000

}

#subcol .col {

width: 210px

padding: 20px

font-size: 85%

line-height: 1.5em

}

</style>

<!-- BEGIN maincol -->

<div id="maincol">

<!-- BEGIN maincol col -->

<div id="col">

<!-- END maincol col -->dsdsds

</div>

<!-- END maincol -->

</div>

<!-- BEGIN subcol col -->

<div id="subcol">

<div class="col">

<!-- END subcol col -->

</div>

<!-- END subcol -->

</div>

<style type="text/css">

html, body {margin: 0padding: 0}

.all{ width:100% height:100%}

.left{ width:100px float:left background:#990 height:100%margin-left: -100%}

.right{ width:100% background:#F90 height:100% float:left}

.right_in{ margin-left:100px height:100% }

</style> <div class="all">

    <div class="right">

        <div class="right_in"> 内容</div>

    </div>

    <div class="left">我是固定的</div>

</div>

这样就可以让右侧的宽度自适应，左侧的宽度固定。

原理：

先让右侧的宽度定义为100%；里面的right_in的左边距等于左边固定宽度的尺寸.