Question

应该是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列中。

Answer 1

只需为left: 0;提供.sellerdiv样式。

.sellerdiv {
    ...
    left: 0;
}

这是the working JSFiddle。

这是整个代码。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

为什么儿童div稍微偏向右边？

1 个答案: