Question

我有以下HTML / CSS / JS：

HTML：

s = input() 
a = int(input()) 
b = s.replace(s[a],'')
print(b)

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/250x200"></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 class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></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 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>

JS：

.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 {
  position: relative;
    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: relative;
    width: 50%;
    float: left;
}

.name-header{
  position: absolute;
  top: 0;
}
.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;
}

.cart-preview .product{
  margin-top: 10px;
}
.product-quantity-details{
  position: absolute;
  top: 25%;
    align-items: center;
    display: inline-flex;
}

.product-quantity-details{
  position: absolute;
  top: 40%;
}

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

.name-header{
  position: absolute;
  top: 0;
}

.price-open{
  position: absolute;
  bottom: 0;
}

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

.cart-preview.cart-overview {
    width: 100%;
    position: inherit;
}
.cart-preview.cart-overview .body {
    display: block;
    position: inherit;
    width: 100%;
}
.cart-preview .header > :first-child {
    float: left;
}
.cart-preview .header > :last-child {
    float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
    clear: both;
    content: "\A0";
}
.cart-preview .body {
    border: 1px solid #808080;
    padding: 2px;
}

现在，我正在尝试将div与类function toggleClass() { document.getElementById('shopping-cart-body').classList.toggle('open'); }相对于固定父级对齐，并将div中的元素（两个文本div和按钮）相对于checkout-div绝对对齐，因此将checkout div始终具有高度的20％，并且内部的元素会相应对齐。我想将元素放置在绝对值内，因此按钮的底部距边距为30px。但是，我没有设法在checkout部门使用position: relative进行这项工作。
我用一个代码笔总结了一下：https://codepen.io/anon/pen/BOLpdG

有人可以帮助我调整div吗？

Answer 1

您好，这是您想要实现的功能的工作版本（我希望我能达到预期的效果）。

我在.cart-preview .body .checkout.car，. .cart-preview .body .checkout>button，.checkout .taxes，.checkout .cart-total中更改了一些CSS。我也将checkout <div>放到了商品容器的外面，并且我在<div>类中又添加了一个.meta-data-wrap。

让我给您提供有关该功能的一些建议。检查所有不同类型的响应长度类型：vh，vw，rem等。另请参见calc函数，该函数非常方便（这些是我用来修改CSS的东西）。另外，当您构造html组件（在您的情况下为侧边栏购物车）时，请尝试将其各自的逻辑部分分离在其自己的容器中，以便更易于操作和管理（就像我在演示中所做的那样，从产品容器中结帐”）。

PS。全屏打开演示：D

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: 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 {
    height: calc(73vh - 20px);
    width: 100%;
    margin-top: 15px;
    overflow: auto;
}

.product {
  position: relative;
    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: relative;
    width: 50%;
    float: left;
}

.name-header{
  position: absolute;
  top: 0;
}
.cart-preview .body .products-container .color-circle:before {
    content: ' \25CF';
    font-size: 30px;
}

.cart-preview .body .checkout {
    position: absolute;
    bottom: 0;
    height: 20vh;
    width: 100%;
    background: gray;
}

.cart-preview .product{
  margin-top: 10px;
}
.product-quantity-details{
  position: absolute;
  top: 25%;
    align-items: center;
    display: inline-flex;
}

.product-quantity-details{
  position: absolute;
  top: 40%;
}

.product-quantity-details .quantity{
    border: 2px solid black;
    margin-right: 10px;
    background: white;
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 15px;
    color: black;
}

.name-header{
  position: absolute;
  top: 0;
}

.price-open{
  position: absolute;
  bottom: 0;
}

.product-quantity-details .quantity:after{
    content: 'x'
}

.cart-preview .body .checkout>button {
    position: absolute;
    background: black;
    text-align: center;
    vertical-align: middle;
    color: white;
    line-height: 14px;
    bottom: 50px;
    height: 20px;
    width: 205px;
    left: 25%;
}

.meta-data-wrap{
    display: flex;
    flex-direction: column;
    width: 20%;
}


.cart-total .value {
    float: right;
}
.cart-total .value:after {
    content:'€'
}

.cart-total .label {
    float: left;
}

.taxes .value {
    float: right;
}

.taxes .label {
    float: left;
}

.cart-preview.cart-overview {
    width: 100%;
    position: inherit;
}
.cart-preview.cart-overview .body {
    display: block;
    position: inherit;
    width: 100%;
}
.cart-preview .header > :first-child {
    float: left;
}
.cart-preview .header > :last-child {
    float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
    clear: both;
    content: "\A0";
}
.cart-preview .body {
    border: 1px solid #808080;
    padding: 2px;
}

  <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/250x200"></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 class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></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 class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></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 class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></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 class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></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 class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></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="meta-data-wrap">
            <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>
          </div>
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
</div>

使div在固定的父div中响应

1 个答案: