2016-04-04 34 views
1

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

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>

+1

あなたはポジションを使用することができます:固定;トップ:0;右:0; – Medda86

答えて

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>

+0

ありがとうございます。あなたがそれをすることができるのか分からなかった。 – jerneva

関連する問題