固定两个Div之间的宽度差距 [英] Fixed width gap between two Div's

问题描述

有没有人有想法如何让两个div之间的差距得到修复？
我有一个主要内容Div，里面有两个Div与图片。视图宽768px，当我开始拉伸视图时，两张图片开始相互移开。但理想情况下，主要内容Div应该以空白区域延伸，图片应该保持与它们之间的固定间隔。

HTML：

 < div class =main-content> 
< h2 class =title-twoid =portfolio> PORTFOLIO< / h2> 
< div class =column-left left> 
< img src =images / picture1.pngclass =first> 
< h2>标题< / h2> 
< p>文字栏位< / p> 
< / div> 
< div class =column-left right> 
< img src =images / picture2.pngclass =first> 
< h2>标题< / h2> 
< p>文字栏位< / p> 
< / div> 
< div class =column-right left> 
< img src =images / picture3.pngclass =first> 
< h2>标题< / h2> 
< p>文字栏位< / p> 
< / div> 
< div class =column-left right> 
< img src =images / picture4.pngclass =first> 
< h2>标题< / h2> 
< p>文字栏位< / p> 
< / div> 
< / div> 
  

CSS：

  @media（min-width：768px）{
 
 .left {
 display：block; 
 float：left; 
宽度：47％; 
 padding-left：2％; 
} 
 
 .right {
 display：block; 
 float：right; 
宽度：47％; 
 padding-right：2％; 
 
 
 $ / code> 

同样的问题出现在文本和图标启动的标题中尽管它们之间的空间应该保持相同。



我已经读过flexbox应该有所帮助，但是当我将显示设置为flex时，所有图片都处于随机地方。


解决方案

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

  @media（min-width：768px）{
 
 .left {
 display：block; 
 float：left; 
宽度：47％; 
保证金余额：2％; 
} 
 
 .right {
 display：block; 
 float：right; 
宽度：47％; 
保证金率：2％; 
} 
} 
  

Does anyone have ideas how to get gap between two divs fixed? I have one main content Div and inside it there are two Div's with pictures. View is 768px wide and when I start to stretch the view, two pictures start to move away from each other. But ideally main content Div should stretch with whitespace around and pictures should remain with fixed gap between them.

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%;
 }
}

Also same problem is in header where text and icon start to move away from each other, although their space between should remain same.

I have read that flexbox should help, but when I set display to flex, all pictures are in random places.

解决方案

use margin-left and margin-right in your 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%;
 }
}

这篇关于固定两个Div之间的宽度差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！