使用HTML和CSS制作下图界面（溢出）

最新推荐文章于 2021-06-20 13:00:01 发布

weixin_34376562

最新推荐文章于 2021-06-20 13:00:01 发布

阅读量114

点赞数

文章标签： python

原文链接：https://my.oschina.net/wangch5453/blog/666728

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>

<html>
 <head>
  <meta charset="UTF-8"/>
  <title>homework</title>
  <style>
#d1{
width:320px;
height:100px;
border:1px solid black;
overflow:auto;
text-align:center;
padding-top:5px;
} 
#d1 td div{
border:2px solid transparent;
border-radius:5px;
}
#d1 td div:hover{
border:2px solid red;
} 
  </style>
 </head>
 <body> 
<div id="d1" >
<table width="490px" height="74px" >
<tr>
<td><div><img src="images/p_small_001.jpg"/></div></td>
<td><div><img src="images/p_small_002.jpg"/></div></td>
<td><div><img src="images/p_small_003.jpg"/></div></td>
<td><div><img src="images/p_small_004.jpg"/></div></td>
<td><div><img src="images/p_small_005.jpg"/></div></td>
<td><div><img src="images/p_small_006.jpg"/></div></td>
<td><div><img src="images/p_small_007.jpg"/></div></td>
</tr>
</table>
</div>
 </body>
</html>

<!doctype html>
<html>
<head>
<meta charset="UTF-8"> 
<title></title>
<link rel="stylesheet" style="text/css" href="demo2.css">
</head>
<body>
<div class="out">
<div class="inner">
<img src="images/1.jpg"/>
<img src="images/2.jpg" class="selected"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
<img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/>
</div>
</div>
</body>
</html>


.out{
width:318px;


/* margin:160px auto; */
overflow-x:auto;
border:1px solid black;
}


.inner{
width:580px;
}
img{
border:1px solid white;
border-radius:5px;
}


img:hover{
border-color:red;
}


.selected{
border:1px solid red;
}

比较上面两端代码，第一段代码和第二段代码实现的结果基本一致，只是第一段代码通过padding-top，使得最终所得的页面框中的图片更加居中，

整体效果相较第二段代码更好。但是第二段代码明显更加不错，代码简练，并且实现了第一段代码实现的所有效果。

第二段代码直接在div中使用div并且没有规定height高度，直接实现了溢出。而第一段代码因为起初就规定了div的height导致使用div溢出时失败，

不得已选择table来进行布局，实现溢出。而且也没有搞清楚img的特点，没有给img直接加边框，而是选择又在td内套用一个div，这里十分冗余。

img也是块元素，可以直接加边框。

第二段代码在id命名方面也是胜出很多，使代码可读性很强，条理清晰。

第一段代码是本人自己所写，问题很多，在看到别人的代码后感觉很有必要比对进步，所以写下此文。

外面的div和里面的div都要写width，否则里面的div的元素会向下溢出

img要被Inner div包裹，单纯排列img只会自动向下溢出

转载于:https://my.oschina.net/wangch5453/blog/666728