html - float 在 div 中不起作用

Question

我有以下 HMTML/CSS:

<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">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="#">öffnen</a></span>
            </div>
          </div>
        </div>

      </div>
      <div class="checkout">
        <div class="taxes">
          <span class="label">Taxes</span>
          <span class="value">0</span>
        </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: 100;
    background-color: #fff;
    transition: right 1s linear;
    right: -400px;
}

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

.cart-preview .body .shooping-cart-body {
    font-family: 'sans-serif';
    width: 100%;
    text-align: center;
}

.cart-preview .body .close{
    float: left;
}
.cart-preview .body .shopping-cart-header{
    font-family: 'IBMPlexSans-Bold.woff'
    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-right: 20px;
}

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

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

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

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

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

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

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

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

.cart-total .label {
    float: left;
}

.taxes .value {
    float: right;
}

.taxes .label {
    float: left;
}

脚本:

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

我没有在图像旁边的一条水平线上看到 div 产品详细信息中的内容。我尝试使用 float: left 和 left:0。有人可以帮我让内容与图片对齐，并且所有起始字母水平排成一行吗？

我把它粘贴到代码笔中:

https://codepen.io/seppl2202/pen/QVNdXd

Answer 1

这是链接 https://codepen.io/anon/pen/vzGgqq与 CSS 。 需要修改的css是

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

inline-flex 会将 .product-details 的元素对齐到一行，align-items: center; 应该完美地将内容对齐在中心, 颜色和数量字段。