2列をコンテナに合わせる

Question

私は自分の好みに合わせて変更しているテンプレートを持っています。マージンやパディングなしのコンテナ（青色）、製品（赤色）を示すループ内にあります。私はすべてが100％幅（49 + 2 + 49 = 100）になるように、1行に2つのプロダクトを表示したいと思います。幅は49％、スペースまたはマージンは2％です。問題は、マージンを追加するとそれが整列しないということです。これを行うにはどのような形式がありますか？

UPDATE：

容器（青色）はフロートである別の容器内にあります。私は2つの製品（赤）を持っているだけでなく、ページあたり20の製品をダンプしています。

コンテナ（product1、product3、product5 ...）の左側の商品をdiv.containerの左側に揃えたいとします。右側の製品（product2、product4、product6 ...）はdiv.containerの右に揃えられ、その間に余白またはスペースがあります。 divの上ご幅について

Answer 1

にあなたのマージンを変更するだけでflexbox modelを利用し、自分自身にいくつかの時間を惜しま。使用prefixes！

.wrapper { 
 
    padding: 1rem; 
 
    background: teal; 
 
    width: 480px; 
 
} 
 

 
.main-element { 
 
    margin-bottom: .7rem; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: white; 
 
} 
 

 
.element-container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.element { 
 
    width: 49%; 
 
    height: 220px; 
 
    background: tomato; 
 
}

<div class="wrapper"> 
 
    <div class="main-element"></div> 
 
    <div class="element-container"> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    </div> 
 
</div>

Answer 2

使用率。パーセンテージは、本文が親要素でない限り、本文ではなく親要素に基づいているため、最終幅を表す親の子であることを確認し、2つの子ブロックのCSSにこれら2つのプロパティを追加します。

width:49%; 
margin: 0 .5% 0 .5%; 

または、2つのdivの間にガターを配置するために、最初の子と最後の子を次のようにターゲティングできます。

.parentdiv:fist-child{ 
    margin-right: 1%; 
    width:49%; 
} 
.parentdiv:last-child{ 
    margin-left: 1%; 
    width:49%; 
} 

Answer 3

、それが次の行にブレークダウンさせ、102パーセントであなたを残して、実際に49 + 2 + 49 + 2であるので、マージンがdiv要素の両方をもたらすされていることに注意してください。

だから、答えは1％