DIV 100%宽度问题.

jgjgjg23 2009-11-19 04:03:41



<div id="div_middle" style="width:100%; height:100%">

        <div style="float:left; background-image:url(images/main_ls.gif); width:10px; height:100%; background-color:Red; z-index:10;">

        </div>

        <div style="float:left; height:100%; width:100%;  background-color:#fff;">abc</div>

        

        <div style="float:left; background-image:url(images/main_rs.gif); width:10px; height:100%;z-index:10;"></div>

        

    </div>

中间的DIV怎么自动适应呢

...全文

96 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

jgjgjg23 2009-11-28

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>div + css宽度自适应（液态布局）</title>

    <style type="text/css">

        /*左边栏，设定宽度*/

        .wrap_l

        {

            float: left;

            margin-right: -150px;

            width: 150px;

            border: 1px solid #333;

        }

        /*中间栏，宽度auto*/

        .wrap_m

        {

            width: auto;

            margin: 0 140px 0 150px;

            border: 1px solid #000;

        }

        /*右边栏，固定宽度*/

        .wrap_r

        {

            float: right;

            margin-left: -140px;

            width: 140px;

            border: 1px solid #999;

        }

        </style>

</head>

<body>

    <div id="wrap">

        <div class="wrap_l">

            这是左边部分<br />

            这是左边部分<br />

            这是左边部分

        </div>

        <div class="wrap_r">

            这是右边部分<br />

            这是右边部分<br />

            这是右边部分

        </div>

        <div class="wrap_m">

            这是中间部分

        </div>

    </div>

</body>

</html>

aqqinqin_good 2009-11-19

打赏
举报

宽是没法设置自适应的。除非你的块外面有大的块宽做参照！！

可有用RIGHT:100 LEFT:100 但这种我觉得很不科学。。。

aqqinqin_good 2009-11-19

打赏
举报

去掉中间的都自动就对了。。 z-index:10这个在非定位里是没有作用的

<div id="div_middle" style="width:auto; height:auto">
<div style="float:left; background-image:url(images/main_ls.gif); width:10px; height:auto; background-color:Red;">aaa </div>

<div style="float:left; width:100px; height:auto; background-color:#00ff00;">
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
</div>

<div style="float:left; background:#339966 url(images/main_rs.gif); width:10px; height:auto;">c</div>

</div>