沿图像垂直对齐div

时间：2018-08-29 05:45:52

标签： html css

我在一个代码笔中总结了以下HTML / CSS / JS： https://codepen.io/anon/pen/gdwLGm

HTML：

<div id="blockcart-wrapper">
  <div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">

      </a>
    </div>
    <div class="body" id="shopping-cart-body">
      <div class="close"><a href="" onclick="toggleClass()">X</a></div>
      <ul>
      </ul>
      <div class="shopping-cart-header">CART</div>
      <div class="products-container">
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
          <div class="product-details">
            <div class="name-header">This is a very long test name</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">open</a></span>
            </div>
          </div>
        </div>

      </div>
      <div class="checkout">
        <div class="taxes">
          <span class="label">Taxes</span>
          <span class="value">0</span>
          <hr>
        </div>
        <div class="cart-total">
          <span class="label">Total</span>
          <span class="value">0</span>
        </div>
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
  </div>
</div>

CSS：

.cart-preview {
    float: right;
    position: relative;
}

.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
    text-decoration: none;
    color: inherit;
}

.cart-preview .header {
    display: block;
    font-weight: bold;
    border: 1px solid #808080;
    padding: 5px;
    cursor: pointer;
    background-color: #fff;
}

.cart-preview .body {
    visibility: visible;
    position: fixed;
    height: 100%;
    top: 0;
    width: 400px;
    z-index: 101;
    background-color: #fff;
    transition: right 1s linear;
    right: -400px;
}

.cart-preview .body.open {
    visibility: visible;
    transition: right 1s linear;
    right: 0px;
}

.cart-preview .body .shopping-cart-body {
    font-family: 'IBMPlexSerif';
    width: 100%;
    text-align: center;
}

.cart-preview .body .close{
    margin-top: 20px;
    margin-left: 20px;
    font-size: 30px;
    float: left;
}
.cart-preview .body .shopping-cart-header{
    font-family: 'IBMPlexSans';
    font-size: 45px;
    margin-top: 40px;
    text-align: center;
}
.cart-preview .body .products-container {
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: 15px;
    overflow: auto;
}

.product {
    display: flex;
}

.product>div {
    width: 50%;
}

.product .prodcut-image {
    margin-left: 20px;
    margin-right: 10px;
}

.product img {
    width: 100%;
    height: auto;
}


.name-header{
        text-align: left;
    }

.cart-preview .body .products-container>.product-image {
    position: absolute;
    width: 50%;
    left: 0;
}

.cart-preview .body .products-container>.product-details {
    position: absolute;
    width: 50%;
    float: left;
}


.cart-preview .body .products-container .color-circle:before {
    content: ' \25CF';
    font-size: 30px;
}

.cart-preview .body .checkout {
    position: absolute;
    top: 80%;
    height: 100%;
    width: 100%;
    background: white;
}

.product-quantity-details .quantity{
    float: left;
    text-align: center;
    border: 2px solid black;
    margin-right: 10px;
    background: white;
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 33px;
    color: black;
}

.cart-preview .product{
    margin-top: 10px;
}

.product-quantity-details .quantity:after{
    content: 'x'
}


.cart-preview .body .checkout>button {
    position: absolute;
    background: black;
    text-align: center;
    vertical-align: middle;
    border: none;
    color: white;
    top: 13%;
    line-height: 14px;
    bottom: 50px;
    height: 40px;
    width: 205px;
    left: 25%;
}

.checkout .taxes{
    position: absolute;
    width: 100%;
    top: 5%;
}

.checkout .cart-total{
    position: absolute;
    width: 100%;
    top: 10%;
    float: left;
}

.cart-total .value {
    margin-right: 20px;
    float: right;
}
.cart-total .value:after {
    content:'€'
}

.cart-total .label {
    margin-left: 20px;
    float: left;
}


.taxes .value {
    margin-right: 20px;
    float: right;
}

.taxes .label {
    margin-left: 20px;
    float: left;
}

.taxes>hr{
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border-color: black;
}

.product-quantity-details{
    align-items: center;
    display: inline-flex;
}
.product-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

#blockcart-modal {
    position: fixed;
    background-color: hsla(0, 0%, 100%, .1);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center
}

#blockcart-modal > div {
    padding: 20px;
    display: inline-block;
    min-width: 50%;
    min-height: 400px;
    margin-top: 200px;
    text-align: left;
    background-color: #fff;
    z-index: 100;
    border: 1px solid #ccc
}

和JavaScript（仅包含一个函数）：

function toggleClass() {
  document.getElementById('shopping-cart-body').classList.toggle('open');
}

因此，目标是将商品对准图片的右侧。名称（类别为name-header的div始终应位于图片的“最高”级别，数量（类别为product-quantity-details的div应该为图片的“一半”）和价格（类别为{ {1}}应该在底部。元素内的对齐方式很好，只是定位不符合我想要的方式。
我尝试的方法：我尝试使用price-open来对齐div，然后使用position: absolute;来命名，使用top:0;来描述价格，并使用bottom:0;来描述数量。这真的没有用。
有人可以帮我吗？

2 个答案:

答案 0 :(得分：1)

这是我的解决方案，以全屏模式打开代码段

仅出于测试目的，我将图像的高度增加到300px。

justify-content:space-between;将通过在子级之间平均分配空间来对齐项目。

在您的情况下，名称位于顶部，产品详细信息位于中间，价格位于底部

将此添加到我们的CSS 

 .product-details{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content:space-between;
    }


function toggleClass() {
  document.getElementById('shopping-cart-body').classList.toggle('open');
} 
.cart-preview {
    float: right;
    position: relative;
}

.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
    text-decoration: none;
    color: inherit;
}

.cart-preview .header {
    display: block;
    font-weight: bold;
    border: 1px solid #808080;
    padding: 5px;
    cursor: pointer;
    background-color: #fff;
}

.cart-preview .body {
    visibility: visible;
    position: fixed;
    height: 100%;
    top: 0;
    width: 400px;
    z-index: 101;
    background-color: #fff;
    transition: right 1s linear;
    right: -400px;
}

.cart-preview .body.open {
    visibility: visible;
    transition: right 1s linear;
    right: 0px;
}

.cart-preview .body .shopping-cart-body {
    font-family: 'IBMPlexSerif';
    width: 100%;
    text-align: center;
}

.cart-preview .body .close{
    margin-top: 20px;
    margin-left: 20px;
    font-size: 30px;
    float: left;
}
.cart-preview .body .shopping-cart-header{
    font-family: 'IBMPlexSans';
    font-size: 45px;
    margin-top: 40px;
    text-align: center;
}
.cart-preview .body .products-container {
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: 15px;
    overflow: auto;
}

.product {
    display: flex;
}

.product>div {
    width: 50%;
}

.product .prodcut-image {
    margin-left: 20px;
    margin-right: 10px;
}

.product img {
    width: 100%;
    height: 300px; /*For testing purpose*/
}


.name-header{
        text-align: left;
    }

.cart-preview .body .products-container>.product-image {
    position: absolute;
    width: 50%;
    left: 0;
}

.cart-preview .body .products-container>.product-details {
    position: absolute;
    width: 50%;
    float: left;
}


.cart-preview .body .products-container .color-circle:before {
    content: ' \25CF';
    font-size: 30px;
}

.cart-preview .body .checkout {
    position: absolute;
    top: 80%;
    height: 100%;
    width: 100%;
    background: white;
}

.product-quantity-details .quantity{
    float: left;
    text-align: center;
    border: 2px solid black;
    margin-right: 10px;
    background: white;
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 33px;
    color: black;
}

.cart-preview .product{
    margin-top: 10px;
}

.product-quantity-details .quantity:after{
    content: 'x'
}


.cart-preview .body .checkout>button {
    position: absolute;
    background: black;
    text-align: center;
    vertical-align: middle;
    border: none;
    color: white;
    top: 13%;
    line-height: 14px;
    bottom: 50px;
    height: 40px;
    width: 205px;
    left: 25%;
}

.checkout .taxes{
    position: absolute;
    width: 100%;
    top: 5%;
}

.checkout .cart-total{
    position: absolute;
    width: 100%;
    top: 10%;
    float: left;
}

.cart-total .value {
    margin-right: 20px;
    float: right;
}
.cart-total .value:after {
    content:'€'
}

.cart-total .label {
    margin-left: 20px;
    float: left;
}


.taxes .value {
    margin-right: 20px;
    float: right;
}

.taxes .label {
    margin-left: 20px;
    float: left;
}

.taxes>hr{
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border-color: black;
}

.product-quantity-details{
    align-items: center;
    display: inline-flex;
}
.product-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content:space-between;
}

#blockcart-modal {
    position: fixed;
    background-color: hsla(0, 0%, 100%, .1);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center
}

#blockcart-modal > div {
    padding: 20px;
    display: inline-block;
    min-width: 50%;
    min-height: 400px;
    margin-top: 200px;
    text-align: left;
    background-color: #fff;
    z-index: 100;
    border: 1px solid #ccc
}
<div id="blockcart-wrapper">
  <div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">

      </a>
    </div>
    <div class="body" id="shopping-cart-body">
      <div class="close"><a href="" onclick="toggleClass()">X</a></div>
      <ul>
      </ul>
      <div class="shopping-cart-header">CART</div>
      <div class="products-container">
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
          <div class="product-details">
            <div class="name-header">This is a very long test name</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">open</a></span>
            </div>
          </div>
        </div>

      </div>
      <div class="checkout">
        <div class="taxes">
          <span class="label">Taxes</span>
          <span class="value">0</span>
          <hr>
        </div>
        <div class="cart-total">
          <span class="label">Total</span>
          <span class="value">0</span>
        </div>
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

也添加这两件事

.cart-preview .header {
    float: left;
}

.cart-preview .body {
    float: left;
}
相关问题
最新问题