时间戳

首页 > 解决方案 > 缩小屏幕尺寸时如何防止水平容器重叠或移动？

html - 缩小屏幕尺寸时如何防止水平容器重叠或移动？

问题描述

我正在尝试将两个框对齐，如下所示。在缩小屏幕尺寸之前，这将如下所示工作。然后项目变得混乱，如第二张图片所示。

我正在使用的代码如下：

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>

我怎样才能解决这个问题？

标签： htmlcssweb

解决方案

您的边距和像素使一切都过于精确。它们是重叠的，因为这些框仍然遵循边距规则。要使其灵活，请使用 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 或 %。

推荐阅读