用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

来源:互联网 发布:免费远程控制软件 编辑:程序博客网 时间:2024/06/05 22:33

HTML程序:

<div style="padding: 0 400px 0 300px;" class="box">    <div id="box5">box5</div>    <div id="box6">box6</div>    <div id="box7">box7</div></div><div class="box">    <div id="box9"></div></div>

方法一css程序:

      <pre name="code" class="css">#box5{            float: left;            margin-top: 50px;            background-color: #34ED16;            width: 100%;            height: 50px;        }        #box6{            float: left;            background-color: blue;            width: 300px;            height: 50px;            margin:50px 0 0 -100%;            position: relative;            left: -300px;        }        #box7{            float: right;            background-color: aquamarine;            width: 400px;            height: 50px;            margin:50px -400px 0 0;        }

方法二css程序:

#box9{            float: left;            margin-top: 150px;            border-left: solid 300px #34ED16;            border-right:solid 300px aquamarine;            background-color: blue;            width: 55.5%;            height: 50px;        }


1 0
原创粉丝点击