css定位：static fixed relative absolute
static 正常流 top bottom left right 无效
fixed 基点：固定于浏览器窗口
relative 基点：相对于元素正常位置 主要功能 ：做absolute的父容器 不脱离文档流，占据空间
absolute 基点：基于非static定位的父元素定位。 脱离文档流，不占据空间
float 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止（碰到阻碍）。
最初功能：图文环绕。浮动元素之后的元素将环绕它。
代码中每张图片float:left
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
margin:5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="190">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="120">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="130">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="60">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="20">
<img class="thumbnail" style="float:left" src="/images/klematis3_small.jpg" width="70" height="90">
</body>
</html>
如图，紫花小图片尽量向左移动，直到碰到另一个浮动框的边框阻挡。紫花小图片的顶端与最先遇到的图片底部平齐。
<div class="div1"> <img src="../image/0.jpg"/> <p class="left" style="max-width:30%"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div>
<div class=" div1"> <img class="left" src="../image/0.jpg"/> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div>
<div class="div1"> <img src="../image/0.jpg"/> <p class="left" style="width:200px"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
</div>
<div class="div1"> <img src="../image/0.jpg"/> <p class="left" > This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div>
浙公网安备 33010602011771号