减小屏幕尺寸后如何防止水平容器重叠或移动？

问题描述

我正在尝试将两个框彼此对齐，如下所示。如下所示，直到缩小屏幕尺寸为止。然后，物品变得混乱，如第二张图片所示。

我正在使用的代码如下：

CSS

#leftBox { 
  margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 10px;
  margin-left: 35%;
  float:left;    
} 

#rightBox { 
  margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 35%;
  margin-left: 10px;
  float:right;
} 

一切都包裹在这个容器中：

.mycontainer {
  position: relative;
  z-index: 2;
  padding: 104px 0 24px 0;
  width: 95%;
  max-width: 600px;
  margin: auto;
}

HTML

<div id = "leftBox">
        <a target="_blank" href="link" style="text-decoration: none">
          <code>
           <img src="github.png" height="25" width="25"/>
          </code>
        </a>
      </div>
      <div id = "rightBox">
        <a target="_blank" href="link" style="text-decoration: none">
          <code>
           <img src="linkedin.png" height="25" width="25"/>
          </code>
        </a>
      </div>

我该如何解决？

解决方法

您的边距和像素使所有内容都过于精确。它们重叠是因为这些框仍遵循边距规则。要使其灵活，请使用flexbox。

添加：

<div class="container">
  <!-- Your code -->
</div>

将此设为您的CSS：

.container{
  display:flex;
  justify-content: space-evenly;
  flex-wrap:wrap;
}
  
 #leftbox,#rightbox { 
    margin: 3% 5%;
}

如果您不希望框使用整个屏幕，请在容器中添加width: 80vw;或所需的内容。尝试不使用像素。理想情况下是vw，vh，rem或％。

,

除非您要专门设置像素，否则最好使用视图宽度和视图高度作为单位，而不是使用像素。 因此，您的CSS应该看起来像这样：

margin-top：3vh; 右边距：2vw;

，依此类推。否则，您可以通过@media调用手动设置div以调整为屏幕尺寸