使用HTML和CSS制作下图界面（溢出）
2016-04-26 00:00
871 查看
[code=plain]<!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>[code=plain]<!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>
[code=plain]
.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只会自动向下溢出
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐