2つのDivの間の固定幅のギャップ

Question

2つのdiv間のギャップを取り除く方法を知っている人はいますか？ 私は1つのメインコンテンツDivを持っており、その中には2つのDivの写真があります。ビューは768ピクセル幅で、ビューを引き伸ばすと、2つの画像が離れて移動し始めます。しかし理想的には、メインコンテンツのDivは空白で囲まなければならず、写真はそれらの間に固定されたギャップのままでなければなりません。

HTML：

<div class="main-content"> 
     <h2 class="title-two" id="portfolio">PORTFOLIO</h2> 
     <div class="column-left left"> 
     <img src="images/picture1.png" class="first"> 
     <h2>Title</h2> 
     <p>Text field</p> 
     </div> 
     <div class="column-left right"> 
     <img src="images/picture2.png" class="first"> 
     <h2>Title</h2> 
     <p>Text field</p> 
     </div> 
     <div class="column-right left"> 
     <img src="images/picture3.png" class="first"> 
     <h2>Title</h2> 
     <p>Text field</p> 
     </div> 
     <div class="column-left right"> 
     <img src="images/picture4.png" class="first"> 
     <h2>Title</h2> 
     <p>Text field</p> 
     </div> 
</div> 

CSS：

@media (min-width: 768px) { 

.left { 
    display: block; 
    float:left; 
    width: 47%; 
    padding-left: 2%; 
} 

.right { 
    display: block; 
    float:right; 
    width: 47%; 
    padding-right: 2%; 
} 
} 

また同じ問題が間に彼らのスペースは同じままべきであるが、テキストとアイコンは、互いに離れる移動を開始ヘッダです。

フレックスボックスが役立つはずですが、ディスプレイをフレックスに設定すると、すべての画像がランダムな場所に表示されます。

Answer 1

あなたのCSSの

使用マージン左マージン、右

@media (min-width: 768px) { 

.left { 
    display: block; 
    float:left; 
    width: 47%; 
    margin-left: 2%; 
} 

.right { 
    display: block; 
    float:right; 
    width: 47%; 
    margin-right: 2%; 
} 
} 

Answer 2

使用マージン右マージン左。 thisのように。ご覧のとおり、部門間にはギャップがあります。

.right{ 
margin-right: 2%; 
} 

.left{ 
margin-left: 2%; 
}