px

Question

'da eksi kullanmanın bir alternatifi var mı? Web sayfamı şekillendirdim, web sayfamda bir orta bölüm ekleyene kadar her şey yolunda gitti. alışveriş kartı. Orta bölüm% 50 (genişlik) ve sağ bölüm% 15 genişliğe sahiptir. Genişliğin değerini değiştirirsem merkez bölüm hala sağ bölümün yerleşimini etkiler. Sağ taraf sayfanın en üstünden 100 piksele kadar geri gelmesini sağlamanın tek yolu, kenar boşluğu kullanıyorum: -50px. Bildiğim, kaşlarını çattı. Bu sorunu çözmek için daha iyi bir yol var mı.

section#cart{ 
 
padding: 0; 
 
margin: 0; 
 
float: right; 
 
margin-right: 20px; 
 
margin-top: 100px; 
 
width: 15% !important; 
 
border: 1px solid #808284; 
 
height: 200px; 
 
text-transform: uppercase; 
 
} 
 

 
p#order{ 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #e86065; 
 
    width: 100%; 
 
    height: 30px; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-size: 1em; 
 
    padding-top: 10px; 
 
    text-transform: uppercase; 
 
} 
 

 
p#estimated{ 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #d5e16d; 
 
    width:100%; 
 
    height: 80px; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
    font-size: 0.9em; 
 
    text-transform: uppercase; 
 
    padding-top: 5px; 
 
    color: #000; 
 
    font-weight: bold; 
 
} 
 

 
b#avg{ 
 
font-size: 2.5em; 
 
color: #00a4c0; 
 
text-align: center; 
 
} 
 

 
/*PRODUCTS VIEW- MIDDLE*/ 
 
section#products_view{ 
 
margin: auto; 
 
width: 50%; 
 
background-color: red; 
 
height: 400px; 
 
margin-top: 110px; 
 
    
 
}

<section id='products_view'> 
 
     <p>hello<p> 
 
     </section> 
 
     
 

 
     <section id='cart'> 
 
      <p id='order'>My Order</p> 
 
      <div id='del'> 
 
       <p id='estimated'>Estimated Delivery <br> 
 
        <b id='avg'><?php echo $rest_avg ?></b><br> 
 
        minutes</p> 
 
       <?php // if (isset($_GET[''])) { 
 
        ?> 
 
      </div> 
 

 
     </section>

Answer 1

Sen flexbox'a ile üç sütun yapısını oluşturarak elde edebilirsiniz. Sol sütun için :before sözde öğe kullanıyorum.

.container { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
.container:before { 
 
    content: ""; 
 
} 
 
.container:before, #cart { 
 
    flex: 1; 
 
} 
 
#cart { 
 
    background: grey; 
 
} 
 
#products_view { 
 
    flex: 0 0 50%; 
 
    height: 150px; 
 
    background-color: silver; 
 
}

<div class="container"> 
 
    <section id='products_view'> 
 
    hello 
 
    </section> 
 
    <section id='cart'> 
 
    cart 
 
    </section> 
 
</div>

Eğer pozisyon kullanabilirsiniz