典型的なDIV + CSSのレイアウト（左、右）

典型的なDIV + CSSレイアウト-固定幅と中心レイアウト、浮動性の使用;この例では、絶対位置のプロパティを使用します。

1、「位置：相対;」でセット#container、役割絶対に#containerブラウザへのベースラインではなく、自分の将来の後ろに配置することです。

2、左と右の列は#right_sideカラム絶対位置を#left_sideと、2つの固定幅のdiv、および中央の列が自動的に起因する必要の#contentブラウザに調整され、類似の特性を設定されていません。

しかし、位置プロパティの他の二つのブロックの絶対ので、マージン、左マージン及び右プロパティは190pxに設定されている場合でなければなりません

 Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head runat="server">  
    <title>左中右版式</title>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div id="wrap">  
        <div id="header">header</div>  
        <div id="container">  
            <div id="left_side">left_side</div>  
            <div id="content">content</div>  
            <div id="right_side">right-side</div>  
        </div>  
        <div id="footer">footer</div>  
    </div>  
    </form>  
</body>  
</html>

#wrap{  
    width:700px;  
    margin:0 auto;  
}  
#header{  
    margin:20px;  
    height:80px;  
    border:solid 1px #0000FF;  
}  
#container{  
    position:relative;  
    margin:20px;  
    height:400px;  
}  
#left_side{  
    position:absolute;  
    top:0px;  
    left:0px;  
    border:solid 1px #0000FF;  
    width:170px;  
    height:100%;  
}  
#content{  
    margin:0px 190px 0px 190px;  
    border:solid 1px #0000FF;  
    height:100%;  
}  
#right_side{  
    position:absolute;  
    top:0px;  
    right:0px;  
    border:solid 1px #0000FF;  
    width:170px;  
    height:100%;  
}  
#footer{  
    margin:20px;  
    height:80px;  
    border:solid 1px #0000FF;  
}

chengzhen137

公開された139元の記事・ウォン称賛13 ・ビュー9298

プライベートの手紙の懸念

典型的なDIV + CSSのレイアウト（左、右）

おすすめ