喜悦国际村 » XML/HTML/CSS/Js » 求一CSS布局

页: [1]
starDust2006-11-14 04:29 AM
求一CSS布局

想用div+css实现类似左右frame那种效果..即三栏最左边是菜单,中间是一个操作左边开关的小栏,右边是主要内容,左,中栏都是固定宽度,右边自适应

左右都是用一iframe载入内容,中间采用display:none的方式开关左边,试了很久,IE上可以,但FF只是不行..有高手帮帮忙吗?

starDust2006-11-14 04:33 AM
以下代码只在IE下正常
[code]
<style>
        #dvLeft{float:left;width:180px;background-color:#cc0;height:100%;}
        #middle{float:left;width:12px;background-color:#c80;height:100%;}

</style>

<script language="javascript">
function $(obj){return document.getElementById(obj);}
function switchBar(){
        if($("barStatus").value==0){
                $('dvLeft').style.display = 'none';
        }else{
                $('dvLeft').style.display = '';
        }
        $("barStatus").value = 1 - $("barStatus").value;
}
</script>

<div style="width:100%;height:100%;background-color:#ccc;">
        <div id="dvLeft">这里是 left 部分</div>
        <div id="middle">
       <input type="hidden" value="0" id="barStatus" />
           <a href='###' onclick="switchBar()">&gt;&gt;</a>
        </div>

        <div id="content">
                <iframe id="content" style="width:100%; height: 100%" frameBorder="0" scrolling=auto src="1.htm"></iframe>
        </div>
       
</div>

[/code]

hansir2006-11-24 12:57 AM
<style>
        #main{width:100%; height:200px;}
        #leftmain{float:left; width:20%;height:200px;}
        #leftmenu{float:left; width:90%;background-color:#bbbbbb; height:200px;}
        #leftbar{float:right; background-color:#cccccc; width:10%; height:200px;}
       
        #rightmain{float:right; width:80%;background-color:#dddddd; height:200px;}
        #clear{clear:both}
       
</style>

<div id="main">
        <div id="leftmain">
                <div id="leftmenu"></div>
                <div id="leftbar"></div>
                <div id="clear"></div>
        </div>
        <div id="rightmain"></div>
        <div id="clear"></div>
</div>


查看完整版本: 求一CSS布局


Powered by Discuz! Archiver 6.1.0  © 2001-2006 Comsenz Inc.
Processed in 0.005751 second(s), 2 queries