本文详细介绍了如何创建等比缩放布局，确保网页在不同屏幕尺寸下保持良好的比例。首先，通过设置栏宽为百分比实现两栏布局。接着，调整外边距为百分比以保持总宽度为100%，并避免使用固定像素值。最后，针对边框问题，建议在栏内创建额外元素来设置边框，以保持布局的完整性。这一方法适用于响应式网页设计，有助于提升用户体验。
1，等比缩放布局
创建等比缩放布局就是将网页分成几栏，然后用比例而非像素设定它们的宽度。以下面两栏布局为例：
* {
margin: 0px;
padding: 0px;
}
.leftColumn {
width: 33.3%;
float: left;
background-color:yellow;
height:300px;
}
.rightColumn {
width: 66.7%;
float: left;
background-color:#7FFF9B;
height:300px;
}
left
right
2，外边距的宽度设置
使用流式布局时，除了栏宽要使用百分比设置，外边距也必须使用百分比(不能使用固定像素值)，确保栏宽+外边距=100%。
下面在左侧、右侧以及栏目间各添加2%的外边距：
.leftColumn {
width: 31.3%;
margin-left: 2%;
margin-right: 2%;
float: left;
background-color:yellow;
height:300px;
}
.rightColumn {
width: 62.7%;
margin-right: 2%;
float: left;
background-color:#7FFF9B;
height:300px;
}
3，边框的设置
由于边框是添加在元素的外围，而且边框宽度不接受百分比值，直接在栏上设置固定宽度的边框会破坏流式布局。
解决办法是在等比缩放的栏里额外增加一个
* {
margin: 0px;
padding: 0px;
}
body{
background-color:#EFEFEF;
}
.leftColumn {
width: 31.3%;
margin-left: 2%;
margin-right: 2%;
float: left;
background-color:yellow;
}
.rightColumn {
width: 62.7%;
margin-right: 2%;
float: left;
background-color:#7FFF9B;
}
.colomnContent {
border: 1px solid gray;
height:130px;
}
left
right
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
