程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> css-三列布局,左右固定,中間自適應?

css-三列布局,左右固定,中間自適應?

編輯:編程綜合問答
三列布局,左右固定,中間自適應?
 <style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
.header{height: 100px;background: #777;}
.content{height:700px;background: #000;}
.left{ width:240px; height:600px; background:#ccc; position:absolute; left:0; top:100}
.main{ height:600px; margin:0 240px; background:#9CF}
.right{ height:600px; width:240px; position:absolute; top:100; right:0; background:#FCC;}
</style>
</head>

<body>
    <div class="header"></div>
        <div class="content">
            <div class="left">left</div>
            <div class="main">main</div>
            <div class="right">right</div>
        </div>
</body>

很簡單的三列布局,為什麼給右邊欄會浮動到下面去圖片說明

最佳回答:


left和right的css添加top:100px,要不沒設置top時,緊跟上一個容器的位置進行定位

showbo
fashion1993
showbo
fashion1993
fashion1993
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved