pxにマイナスを使用する代わりに使用する

Question

ウェブページにスタイルを設定しました。私のウェブページにセンターセクションを置くまでは、すべてうまく行きました。私のウェブページには右セクションがプッシュされています。ショッピングカート。中央セクションは50％（幅）で、右側のセクションは15％の幅を持ちます。 幅の値を変更しても、中央セクションは依然として右側のセクションの配置に影響します。私がmargin-top：-50pxを使用している場合、右側のセクションがページを100pxから上に戻す唯一の方法です。私が知っているのは、びっくりする。この問題を解決するには、より良い方法がありますか？

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

あなたはフレキシボックスに3列構造を作成することによって、それを達成することができます。私は左の列に:before疑似要素を使用しています。

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