从Div中删除emty Space

Question

我试图摆脱我的div中看起来像这样的空间 如果我尝试推动图像向上工作,但容器高度不会改变,无论如何修复它我的意思是让它们在同一位置对齐？

的HTMl

    <div class="addtocart-holder shadow">
    <div class="cart-img"> <img src="img/product4.jpg"> </div>
    <div class="cart-image-details">
    <div class="cart-item-name">  <h3> Feather Dress With Embellished Lace Top</h3> </div>
    <div class="cart-item-details"> <table>
      <tr>
        <td>Price Before:</td>
        <td class="old">$200</td>
      </tr>
      <tr>
        <td>Price: </td>
        <td>$100</td>
      </tr>
        <tr>
        <td>You Saved:</td>
        <td  class="saved">$100</td>
      </tr>
        <tr>
        <td>Shippment :</td>
        <td class="free">Free</td>
      </tr>
    </table> </div>
    <div class="cart-item-add"> <table>
      <tr>
        <td>Quantity:</td>
        <td class="old"><input type="text" class="form-control"  value="1" /></td>
      </tr>
      <tr>
        <td></td>
        <td><div class="buy-ico"> Add To Cart</div></td>
      </tr>
    </table> </div>
    </div>

CSS

.addtocart-holder{
        min-width: 700px;
        margin-top:100px;
        padding:5px;
        backround: #fff;

    }
    .cart-img, .cart-image-details{
        border:1px solid #f00;
        display: inline-block;
        position: relative;
    }
    .cart-img{
        height:190px;
        width:26%;  
    }
    .cart-img img{
        width:100%;
        height:100%;

    }
    .cart-image-details{
        width:73%;
    }
    .cart-item-name{
        width:100%;
        text-align: center;
    }
    h3{
        text-decoration: none;
        text-align:center;
        margin: 5px 0;
        color:#888;
        font: italic normal 17px georgia;
        font-style: italic;
    }
    .cart-item-details, .cart-item-add{
        width:49%;
        border:1px solid #000;
        display: inline-block;
    }
    table{
        border:1px solid #fff;
        width: 100%;
        color: #888;
    }
    td{
        padding:4px;
        font-size:16px;
        font-weight:500;
    }
    .shadow{
         height: auto !important;
        -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.31);
        -moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.31);
        box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.31);
    }

Answer 1

你必须将vertical-align属性设置.cart-image-details为top.

.cart-image-details {
   vertical-align: top;
}

小提琴:http://jsfiddle.net/u9mtyjoe/

的初始值vertical-alignIS baseline,所以改为top将帮助您调整的div正常.

参考:MDN