0
在grid_4的底部应该是绿色的矩形框，但它看起来略微向右移动并重叠。我在这里做错了什么？为什么小孩div稍微向右移动？
.sellerdiv {
bottom: 0;
text-align: center;
position: absolute;
width: 100%;
height: 12%;
background-color: rgba(0, 255, 0, .2);
}
.sellerpic {
width: 11%;
position: absolute;
border-radius:80px;
}
}
.container {
width: 96%;
margin: 30px auto;
padding: 0 auto;
float:none;
text-align: center;
display: inline-block;
}
.grid_4 {
display: inline-block;
width: 28%;
margin-top: 15;
margin-left: 10px;
margin-right: 10px;
height: 400px;
vertical-align: top;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
position: relative;
cursor: pointer;
background-color:#f1f1f1;
border-radius: 3px;
}
.overlayname {z-index: 3; color: #ffffff;
left: 4%;
font-size: 22px;
position: absolute;
font-family: helvetica;
top:5%;
padding: 3px 8px 3px 8px;
background: rgba(0,0,0,.65);
}
.overlayprice {z-index: 3; color: #ffffff;
left: 4%;
font-size: 12px;
position: absolute;
top: 33%;
font-family: helvetica;
padding: 3px 8px 3px 8px;
background: rgba(0,0,0,.5);
}
.profilepic {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 70px;
}
.sellerdiv {
bottom: 0;
text-align: center;
position: absolute;
width: 100%;
height: 12%;
background-color: rgba(0, 255, 0, .2);
}
.sellerpic {
width: 11%;
position: absolute;
border-radius:80px;<body>
\t <div class="container">
<div class="grid_4">
\t <div class="imgcontainer">
<img src="test.jpg" alt="" />
<div class="overlayname">test title</div>
\t <div class="overlayprice">test price</div>
</div>
<div class="textcontainer">
<p>Description</p>
</div>
<div class="sellerdiv">
\t <div class="sellerpic"><img src="test.jpg"></div>
</div>
</div>
<div class="grid_4">
<img src="test.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="grid_4">
<img src="test3.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>http://jsfiddle.net/autoboxer/3583nazg/注：如果全屏幕或扩展的结果窗口中，您将看到框出现在3列如预期。
你的jsfiddle是从问题中的代码不同模式 – user28470 2014-10-02 07:42:11