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 질문에 표시된 코드에서 defferent입니다 – user28470