这个就float布局,实在不行直接打表格也可以的
绝对定位
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.a{
width:300px;
height: 200px;
position:absolute;
left:200px;
top:250px;
padding: 5px;
border: 3px solid #6ad;
}
.b{
position: absolute;
left:550px;
top:250px;
}
.c{
position: absolute;
left: 200px;
top:460px;
}
ul{
list-style-type: square;
}
body{
font-size: large;
}
.d{
position: absolute;
left:700px;
top:250px;
}
.e{
position: absolute;
top:540px;
left: 750px;
}
.f{
position: absolute;
left:950px;
top:250px;
}
.g{
position: absolute;
left:1000px;
top:540px;
}
</style>
<img class="a" src="file:///C:/Users/25219/Pictures/壁纸.jpg">
<div class="b">
<p style="color: #59c;">潜伏</p>
<p style="color: #99c;">导演:XX<br/>主演:XX<br/>XX</p>
</div>
<div class="c">
<ul >
<li>XXXXXXXXX</li>
<li>XXXXXXXXXXX</li>
</ul>
</div>
<img class="d" style="width:200px;height: 300px;border:3px solid #79c;padding: 3px;" src="file:///C:/Users/25219/Pictures/壁纸手机.jpeg">
<p class="e">XXXXXXX</p>
<img class="f" style="width:200px;height: 300px;border:3px solid #79c;padding: 3px;" src="file:///C:/Users/25219/Pictures/壁纸手机.jpeg">
<p class="g">XXXXXXX</p>
</body>
</html>
```
这种要先去分成两个部分两个部分都被盒子包裹住,两个部分分为左边部分与右边部分。
左边部分可以分为上下两部分,而右边左右两部分。是不是简单多了