该框应为grid_4底部的绿色矩形框，但它似乎向右微移并重叠。我在这里做错了什么？
.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>
<div class="container">
<div class="grid_4">
<div class="imgcontainer">
<img src="test.jpg" alt="" />
<div class="overlayname">test title</div>
<div class="overlayprice">test price</div>
</div>
<div class="textcontainer">
<p>Description</p>
</div>
<div class="sellerdiv">
<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列中。
最佳答案
只需为left: 0;赋予.sellerdiv样式即可。
.sellerdiv {
...
left: 0;
}
这是the working JSFiddle。
这是整个代码。
.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;
left: 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;
}<div class="container">
<div class="grid_4">
<div class="imgcontainer">
<img src="test.jpg" alt="" />
<div class="overlayname">test title</div>
<div class="overlayprice">test price</div>
</div>
<div class="textcontainer">
<p>Description</p>
</div>
<div class="sellerdiv">
<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>关于css - 为什么子div稍微向右移动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26156222/