一、计算百分比
对于流式布局来说，我们可以通过直接定义模块和模块间距百分比的方式来实现，不过和固定布局一样，对于复杂页面来说，把工作交给更规范、更便捷的栅格系统时更好的选择。和固定布局不同的是，流式布局无须考虑container的宽度选择，在栅格计算上，直接将container的宽度值设为100%进行计算，计算方法则和固定栅格是一致的。
二、使图片更加灵活
在流式布局中，我们为了让图片的大小能够随着窗口的大小的变化而变化，我们可以为图片元素添加max-width: 100%;和height: auto;属性，就可以让图片按比例缩放不超过其父元素的尺寸。如果想让图片和父元素一直等宽，则将max-width: 100%;改为width: 100%;即可。
三、定义最大/最小宽度
当采用了流式布局，且没有定义最大/最小宽度时，相关的页面内容会随着窗口宽度的缩小自动进行折行，这样会显得不够美观。同样的，当屏幕过大时，这个页面会被拉得非常宽，也会影响美观和使用体验。
在流式布局得基础上，应用最大/最小宽度则可以在一定程度上解决这个问题。设置最大/最小宽度后，如果窗口大于最大宽度或小于最小宽度时，页面将呈现和固定布局一样的布局。
四、在Bootstrap中流式布局的相关应用
1、引入Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap.css">
</head>
<body>
</body>
</html>
2、在Bootstrap 2中应用流式布局，需要添加
<div class="container-fluid">
<div class="row-fluid">
......
</div>
</div>
5605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
