J'essaie d'obtenir la division avec le prix du montant du nom du produit et le total en haut de la division dans laquelle il est niché, mais changer la position ne fonctionne pas. Des trucs comme l'alignement vertical ne fonctionnaient pas non plus pour moi. J'ai fait une capture d'écran de la page, les boutons sont au bon endroit, c'est juste le genre de tableau qui doit se déplacer en haut de l'écran. Cela doit contenir toutes sortes de produits plus tard.

this is the html: 
<div class="checkout">
    
<div class="container-fluid" style="position: absolute; bottom: 0;">

<!-- Added products overview-->
<div class="checkoutTable">
    <div class="row">
        <div class="col-4">Product Name</div>
        <div class="col-2">Amount</div>
        <div class="col-3">Price</div>
        <div class="col-3 ">Total</div>
    </div>
    
    <hr style="background-color:white;">

    <div class="row">
        <div class="col-4">Product Name</div>
        <div class="col-2">Amount</div>
        <div class="col-3">Price</div>
        <div class="col-3 ">Total</div>
    </div>
</div>
  
  
 
<!-- -->

    <!-- Buttons -->
    <div class="row">
        <a class="checkoutBtn"   href="">
            <div class="col-12 checkoutBtn">
                <i class="fa fa-shopping-cart"></i>  Checkout
            </div>
        </a>
    </div>
    <div class="row">
        <a class="addDiscountBtn" href="#">
            <div class="col-6-xs addDiscountBtn">
                % Add Discount
            </div>
        </a>
        <a class="cancelBtn" href="#">
            <div class="col-6-xs cancelBtn">
                <i class="fa fa-ban"></i> Cancel
            </div>
        </a>
        </div>
    </div>
</div>

Voici le CSS:

.checkout{
    background-color: #22303e;
    height: calc(100vh - 50px);
    color: white;
    font-size: 13px;
}
.checkoutBtn{
   background-color: #0090e3; height: 50px;
   text-align: center;
   line-height: 50px 
}

.addDiscountBtn{
    background-color:#f8ac59; height: 50px;
    text-align: center;
    line-height: 50px

}

.cancelBtn{
    background-color: #ed5565; height: 50px;
    text-align: center;
    line-height: 50px

}
a.checkoutBtn{
    width: 100%;
    color: white;
}
a.addDiscountBtn{
    width: 50%;
    color: white;
}
a.cancelBtn{
     width: 50%;
     color: white;
}

a:hover{
    text-decoration: none;
    opacity: 0.9;
}

.checkoutTable{
    vertical-align:top;
}

enter image description here

0
Yovabo 2 sept. 2020 à 15:27

3 réponses

Meilleure réponse

Pour container-fluid, n'utilisez aucun style en ligne comme vous utilisez style = "position: absolute; bottom: 0;"

Exemple

<div class="checkout">

 <div class="container-fluid"></div>
0
Shraddha 8 sept. 2020 à 09:57

Il existe plusieurs solutions à ce problème

Vous pouvez ajouter position comme

.Class {
   position : absolute;
   top : 0;
}
.Class {
   position :fixed;
   top : 0;
}
0
Dako patel 2 sept. 2020 à 12:52

Vous placez votre div

<div class="checkoutTable">

En div parent

<div class="container-fluid" style="position: absolute; bottom: 0;">

Et ici le style = "bottom: 0;" c'est faire en sorte que tout y figure au bas de la page.

<div class="checkoutTable">
    <!--content-->
</div>
<div class="container-fluid" style="position: absolute; bottom: 0;">
    <!--content-->
</div>
0
Harris Malik 2 sept. 2020 à 12:49