HTML CSS布局 二
2021-06-22 03:03
标签：影响 html css 将不 窗口 默认 pre 文本 可靠 空间 基于浮动的布局是最容易使用，也是最可靠的，只需要设置元素的宽度，然后设置为左或者右浮动即可。 1.两列浮动布局 假设页面总的宽度920px，两个元素间距20px。（display:inline 防止IE双外边距浮动产生的bug）；由于元素是浮动的， 将不再文档流中占据空间，将父节点 overflow:hidden; css代码： 2.三列布局 原理和两列布局一致，可以在右元素里面添加两个元素。同理可以实现。 以上的例子都是以像素为单位，称为固定宽度的布局。是最简单和最常用的布局方法。 固定宽度布局 缺点： 大屏幕下无法充分利用空间；小屏幕下显示不全；固定宽度的布局适合浏览器默认的文字字号，如果将文本字号增加，会影响界面显示。 1.流式布局 使用流式布局，尺寸是用百分数设置。可以根据浏览器窗口进行伸缩，通常会设置min-width，以免缩放页面造成内容的挤压。 如果设计者使用的宽度是960px,大多数用户的屏幕是1250px来计算。百分比为960/1250=76.8%； css代码如下： 由于页面有伸缩 可以增加 max-widht和min-width进行限制。 HTML CSS布局 二 标签：影响 html css 将不 窗口 默认 pre 文本 可靠 空间 原文地址：http://www.cnblogs.com/yxcoding/p/7172158.html基于浮动的布局
.right {
width: 650px;
padding-left: 10px;
float: right;
display: inline;
}
.left {
width: 230px;
float: left;
display: inline;
}
固定宽度、流式布局和弹性布局
.root{
width: 76.8%;
margin: 0 auto;
text-align: left;
}
.right {
width:72.82%;
float: right;
display: inline;
}
.left {
width: 25%;
float: left;
display: inline;
}