怎么让图片这样显示在网页上
方法一：position:abolute;
<div style="height:170px;width:450px;border:1px solid #ccc;position:relative;color:white;">
<div style="position:absolute;left:10px;top:10px;width:100px;height:150px;background:black;">1</div>
<div style="position:absolute;left:340px;top:10px;width:100px;height:150px;background:black;">2</div>
<div style="position:absolute;left:120px;top:10px;width:80px;height:70px;background:black;">3</div>
<div style="position:absolute;left:210px;top:10px;width:120px;height:70px;background:black;">4</div>
<div style="position:absolute;left:120px;top:90px;width:120px;height:70px;background:black;">5</div>
<div style="position:absolute;left:250px;top:90px;width:80px;height:70px;background:black;">6</div>
</div>
方法二：table rospan colspan
<table style="border:1px solid #ccc;color:white;" cellspacing="10" cellpadding="10">
<tr>
<td rowspan="2" style="width:100px;height:150px;background:black;padding:0px;">1</td>
<td style="width:80px;height:70px;background:black;padding:0px;">2</td>
<td colspan="2" style="width:120px;height:70px;background:black;padding:0px;">3</td>
<td rowspan="2" style="width:100px;height:150px;background:black;padding:0px;">4</td>
</tr>
<tr>
<td colspan="2" style="width:120px;height:70px;background:black;padding:0px;">5</td>
<td style="width:80px;height:70px;background:black;padding:0px;">6</td>
</tr>
</table>
方法三：float
<div style="height:150px;width:430px;border:1px solid #ccc;color:white;padding:10px;">
<div style="float:left;width:100px;height:150px;background:black;">1</div>
<div style="float:right;width:100px;height:150px;background:black;">2</div>
<div style="float:left;width:80px;height:70px;background:black;margin-left:10px;">3</div>
<div style="float:left;width:120px;height:70px;background:black;margin-left:10px;">4</div>
<div style="float:left;width:120px;height:70px;background:black;margin-left:10px;margin-top:10px;">5</div>
<div style="float:left;width:80px;height:70px;background:black;margin-left:10px;margin-top:10px;">6</div>
</div>
<div style="clear:both;"></div>
方法四：flex
<div style="display:flex;width:430px;height:150px;justify-content:center;align-items:center;padding:10px;border:1px solid #ccc;color:white;">
<div style="width:100px;height:150px;background:black;">1</div>
<div style="flex:1;padding:10px;">
<div style="display:flex;">
<div style="width:80px;height:70px;background:black;">2</div>
<div style="width:120px;height:70px;background:black;margin-left:10px;">3</div>
</div>
<div style="margin-top:10px;display:flex;">
<div style="width:120px;height:70px;background:black;">4</div>
<div style="width:80px;height:70px;background:black;margin-left:10px;">5</div>
</div>
</div>
<div style="width:100px;height:150px;background:black;">6</div>
</div>
有好几种方法可以实现的
方法一：使用定位
<div style="height:170px;width:450px;border:1px solid #ccc;position:relative;color:white;">
<div style="position:absolute;left:10px;top:10px;width:100px;height:150px;background:black;">1</div>
<div style="position:absolute;left:340px;top:10px;width:100px;height:150px;background:black;">2</div>
<div style="position:absolute;left:120px;top:10px;width:80px;height:70px;background:black;">3</div>
<div style="position:absolute;left:210px;top:10px;width:120px;height:70px;background:black;">4</div>
<div style="position:absolute;left:120px;top:90px;width:120px;height:70px;background:black;">5</div>
<div style="position:absolute;left:250px;top:90px;width:80px;height:70px;background:black;">6</div>
</div>
方法二：使用table布局
<table style="border:1px solid #ccc;color:white;" cellspacing="10" cellpadding="10">
<tr>
<td rowspan="2" style="width:100px;height:150px;background:black;padding:0px;">1</td>
<td style="width:80px;height:70px;background:black;padding:0px;">2</td>
<td colspan="2" style="width:120px;height:70px;background:black;padding:0px;">3</td>
<td rowspan="2" style="width:100px;height:150px;background:black;padding:0px;">4</td>
</tr>
<tr>
<td colspan="2" style="width:120px;height:70px;background:black;padding:0px;">5</td>
<td style="width:80px;height:70px;background:black;padding:0px;">6</td>
</tr>
</table>
方法三：使用浮动
<div style="height:150px;width:430px;border:1px solid #ccc;color:white;padding:10px;">
<div style="float:left;width:100px;height:150px;background:black;">1</div>
<div style="float:right;width:100px;height:150px;background:black;">2</div>
<div style="float:left;width:80px;height:70px;background:black;margin-left:10px;">3</div>
<div style="float:left;width:120px;height:70px;background:black;margin-left:10px;">4</div>
<div style="float:left;width:120px;height:70px;background:black;margin-left:10px;margin-top:10px;">5</div>
<div style="float:left;width:80px;height:70px;background:black;margin-left:10px;margin-top:10px;">6</div>
</div>
<div style="clear:both;"></div>
方法四：使用flex布局
<div style="display:flex;width:430px;height:150px;justify-content:center;align-items:center;padding:10px;border:1px solid #ccc;color:white;">
<div style="width:100px;height:150px;background:black;">1</div>
<div style="flex:1;padding:10px;">
<div style="display:flex;">
<div style="width:80px;height:70px;background:black;">2</div>
<div style="width:120px;height:70px;background:black;margin-left:10px;">3</div>
</div>
<div style="margin-top:10px;display:flex;">
<div style="width:120px;height:70px;background:black;">4</div>
<div style="width:80px;height:70px;background:black;margin-left:10px;">5</div>
</div>
</div>
<div style="width:100px;height:150px;background:black;">6</div>
</div>
div+flex布局就行 看看阮大神的博客写的很清楚 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 0;
padding: 0;
}
.box {
display: flex;
flex-direction: row;
/* 两端对齐，项目之间的间隔都相等。 */
/* justify-content: space-between; */
/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
justify-content: space-around;
}
.box>.left,
.right {
width: 25%;
height: 400px;
background: red;
}
.box>.center {
width: 40%;
height:400px;
/* background: red; */
display: flex;
/* flex-direction: column; */
flex-wrap: wrap;
justify-content:space-between;
align-content:space-between;
}
.box>.center>.small {
width: 40%;
height: 45%;
background: red;
}
.box>.center>.big {
width: 55%;
height: 45%;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
</div>
<div class="center">
<!-- <div class="centerBox"> -->
<div class="small">
</div>
<div class="big">
</div>
<!-- </div>
<div class="centerBox"> -->
<div class="big">
</div>
<div class="small">
</div>
<!-- </div> -->
</div>
<div class="right">
</div>
</div>
</body>
</html>
最简单的方法就是用table来布局，调整每行每列的位置，然后放上图片，
直接div flex 什么的直接写就行
如果有用过前端框架的话，使用各个框架的栅格系统可以很容易实现。学习成本也很小，例如:layui、bootstrap。
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632