Question

有没有人有想法如何解决两个div之间的差距？我有一个主要内容Div，里面有两个Div和图片。视图宽度为768像素，当我开始拉伸视图时，两张图片开始相互远离。但理想情况下，主要内容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应该有帮助，但是当我将显示设置为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

使用margin-right和margin-left。像this一样。如您所见，div之间存在差距。

.right{
margin-right: 2%;
}

.left{
margin-left: 2%;
}

固定两个Div之间的宽度差距

2 个答案: