图片排列的问题
*{padding:0;margin:0;}
.clear{clear:both;overflow:hidden;}
ul{list-style:none;}
.container{width:800px;margin:50px auto;}
.container li{
float:left;
width:170px;
margin:15px 10px;
padding:5px;
border-radius:5px;
box-shadow:0 0 2px rgba(0,0,0,.5);
}
.container li img{
width:170px;
height:120px;
border-radius:5px;
vertical-align:bottom;
}
///////
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>多彩照片墙</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div>
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
<li><img src="img/7.png"/></li>
<li><img src="img/8.png"/></li>
</ul>
</div>
</body>
</html>
///为什么 效果不是 两排的 而是自上到下的
qq_terituly_03回答
-
狂飙的蜗牛_1
父元素宽度不够大的话，子元素会被挤到下一行 -
qq_terituly_0
知道原因了 html 中class="hot"与 CSS中的不符 -
qq_terituly_0
应该是 红色样式的 确是箭头左边的样式
随时随地看视频慕课网APP
CSS3
Html/CSS