固定两个 Div 之间的宽度间隙

Question

有没有人知道如何修复两个 div 之间的差距？ 我有一个主要内容 Div，里面有两个带图片的 Div。视图是 768px 宽，当我开始拉伸视图时，两张图片开始相互远离。但理想情况下，主要内容 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%;
 }
}

同样的问题是标题中的文本和图标开始相互远离，尽管它们之间的空间应该保持不变。

我读过 flexbox 应该会有所帮助，但是当我将 display 设置为 flex 时，所有图片都在随机位置。

Answer 1

在你的 CSS 中使用 margin-left 和 margin-right

@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。如您所见，div 之间存在间隙。

.right{
margin-right: 2%;
}

.left{
margin-left: 2%;
}