浮動法布局
1、效果圖
2、代碼
2.1 jsp
1 <%-- 2 Created by IntelliJ IDEA. 3 User: wcy 4 Date: 2016/11/15 5 Time: 21:16 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>浮動法</title> 12 <link href="css/site.css" rel="stylesheet" type="text/css"/> 13 </head> 14 <body> 15 <div id="head">head</div> 16 <div id="container"> 17 <div id="content">content</div> 18 <div id="side">side</div> 19 </div> 20 <div id="foot">foot</div> 21 </body> 22 </html>
2.2 css
1 body{ 2 text-align: center; 3 } 4 5 #head,#container,#content,#side,#foot{ 6 margin: 20px auto 20px auto; 7 padding: 20px 0px 20px 0px; 8 border: 1px red solid; 9 } 10 11 #head,#container,#foot{ 12 width: 900px; 13 } 14 15 #container{ 16 height: 320px; 17 border: 0px; 18 } 19 20 #content{ 21 float: left; 22 height: 240px; 23 width: 700px; 24 } 25 26 #side{ 27 float: right; 28 height: 150px; 29 width: 140px; 30 }
浙公網(wǎng)安備 33010602011771號