怎么让图片这样显示在网页上

Question

 

Answer 1

  方法一：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>