通过定位的方式是我们实现瀑布流的最基本的原理，只要我们动态的设置它的top值、left值，就能让它排列
1、灵活性不同：
静态布局：毫无灵活性可言，目前已逐渐被淘汰。
自适应布局：静态布局的升级版，因其强大的灵活性，已逐渐成为高端网页的代名词。
流式布局：灵活性更高，可适用于其他三种网站布局。
响应式布局：自适应布局的升级版，响应式网站要普遍适应市面上各类屏幕，开发难度和工作量都是非常大的，开发价格自然比普通网站高。
2、设计方法不同：
静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。
自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
流式布局：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。
响应式布局：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
扩展资料：
静态、自适应、流式、响应式四种网页布局的特点概括
1、静态布局：即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。
2、流式布局：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
3、自适应布局：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
4、响应式布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
实现方法，添加align标签，让table居中，再在视频区右边添加一个表格，把下面的东西拷到表格中。<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
function verify() {
var url = "/reply?reply.content="+$("#content").val()
+"&movie.id="+$("#movieid").val()
alert(url)
$.get(url,null,function(data){
$("#tt").html(data)
})
}
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<s:property value="movie.name" />
</td>
</tr>
<tr>
<td>
<embed src="images/swf/Flvplayer.swf" allowfullscreen="true"
flashvars="vcastr_file=<s:property value="movie.url"/>"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="500" height="400">
</embed>
</td>
<td>
<s:iterator value="movies">
<a href="/watchMovie.do?movie.id=<s:property value="id"/>"><s:property value="name" /></a>
<br>
</s:iterator>
</td>
</tr>
</table>
<div id="tt"/>
<table>
<s:iterator value="replies">
<tr>
<td>
<a href="/watchMovie.do?movie.id=<s:property value="id"/>">
<s:property value="person.name" />
</a>
says:
<br/><s:property value="date" />
</td>
</tr>
<tr>
<td>
<s:property value="content" />
</td>
</tr>
</s:iterator>
</table>
<form id="replyForm" method="post" action="/reply/reply.do">
<table align="center">
<tr>
<td>
<input id="movieid" type="hidden" name="movie.id" value="<s:property value="movie.id"/>"/>
<textarea id="content" name="reply.content" rows="3" cols="50"></textarea>
</td>
</tr>
<tr>
<td>
<input type="button" value="ok" onClick="verify()">
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>
</html>
