用兩種不同的方式來實現一個三列布局，其中左側和右側的部分寬度固定，中間部分寬度隨瀏覽器寬度的變化而自適應變化
阿新 • • 發佈：2019-02-13
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程式：
方法二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; }
#box9{
float: left;
margin-top: 150px;
border-left: solid 300px #34ED16;
border-right:solid 300px aquamarine;
background-color: blue;
width: 55.5%;
height: 50px;
}