mokha21
یک شنبه 27 اسفند 1391, 13:36 عصر
کدهای html :
<div id=body>
<div id=sr>
<div class=bl>
<div class=to>ستون راست</div>
<div class=bo>
<br><br>
محتویات بلوک
<br><br>
</div>
</div>
</div>
<div id=co>
<div class=ro>
<div class=bl style="width:50%;">
<div class=to>مطلب 1</div>
<div class=bo>
<br><br><br>
</div>
</div>
<div class=bl style="width:50%;">
<div class=to>مطلب 2</div>
<div class=bo>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
<div class=ro>
<div class=bl style="width:50%;">
<div class=to>مطلب 3</div>
<div class=bo>
<br><br><br>
</div>
</div>
<div class=bl style="width:50%;">
<div class=to>مطلب 4</div>
<div class=bo>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</div>
<div id=sl>
<div class=bl>
<div class=to>ستون چپ</div>
<div class=bo>
<br><br>
محتویات بلوک
<br><br>
</div>
</div>
</div>
</div>
کدهای css:
#body{
display:table;
width:100%;
height:100%;
}
#sr{
display:table-cell;
background:#CCC;
width:150px;
}
#co{
display:table-cell;
background:#666;
}
#co .ro{
}
#co .bl{
float:right;
min-width:180px;
}
#co .bo{
min-height:150px;
}
#sl{
display:table-cell;
background:#CCC;
width:150px;
}
.bl{
margin:8px 0;
}
.to{
color:#555;
padding:0 5px;
line-height:35px;
border:#d5d5d5 1px solid;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
-o-border-radius:4px 4px 0 0;
border-radius:4px 4px 0 0;
background:#f9f9f9;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#e9e9e9),to(#fafafa));
background-image:-webkit-linear-gradient(top,#fafafa,#e9e9e9);
background-image:-moz-linear-gradient(top,#fafafa,#e9e9e9);
background-image:-ms-linear-gradient(top,#fafafa,#e9e9e9);
background-image:-o-linear-gradient(top,#fafafa,#e9e9e9);
background-image:linear-gradient(top,#fafafa,#e9e9e9);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa',EndColorstr='#e9e9e9');
margin:0 6px;
}
.bo{
background:#FFF;
border:#d5d5d5 1px solid;
border-top:0;
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
-o-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
margin:0 6px;
padding:5px;
}