我有以下Div:
<div class = "left">
<div class = "custimage"><img src = "img/notch.jpg" alt = "notch"/><p>Notch</p></div>
<div class = "custimage"><img src = "img/peak.jpg" alt = "peak"/><p>Peak</p></div>
<div class = "custimage"><img src = "img/shawl.jpg" alt = "shawl"/><p>Shawl</p></div>
</div>
CSS:
.left {
position: relative;
float: left;
width:600px;
height:200px;
background-color: #000;
opacity: 0.7;
}
.custimage{
position:relative;
margin-top: 15px;
margin-left: 15px;
height: 170px;
width: 130px;
background-color: #999;
text-align:left;
}
.custimage p{
color: #fff;
font:normal 60%/1.5 Helvetica, Arial, sans-serif;
padding-left: 5px;
}
图像不会水平对齐:
http://www.everry.com/new/customise/customisenow.html
我做错了什么?
答案 0 :(得分:9)
在float:left
.custimage
.custimage{
position:relative;
margin-top: 15px;
margin-left: 15px;
height: 170px;
width: 130px;
background-color: #999;
text-align:left;
float: left; // float all cust images to the left so they stack up against each other
}
答案 1 :(得分:2)
两种方式:
首先:将float:left
添加到.custimage
秒:而不是浮动,将display:inline-block
添加到.custimage。
第二个在旧版浏览器中不起作用,但比让所有浏览器浮动更清晰。
答案 2 :(得分:2)
将float: left
添加到.custimage
。