html - 如何缩小两个div之间的空间

Question

我在另一个 div 中有两个 div。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  width: 100%
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.content {
  display: table-cell;
  height: 100vh;
}

#about {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#aboutInfo {
  font-size: 45px;
  overflow: auto;
}

#aboutImage {
  padding: 0;
  margin: 0;
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  #about {
    flex-direction: column;
    height: 100%;
  }
  #about #aboutImage {
    max-width: 100%;
    height: auto;
  }
  #about #aboutInfo {
    max-height: 200px;
    margin: auto;
  }
}

<div class="content" id="about">
  <div id="aboutImage">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div id="aboutInfo">
    <p> A really long text here, multiple lines of sentences </p>
  </div>
</div>

如何缩小两个 div 之间的空间，同时保持响应式元素？我尝试在 aboutInfo 下添加 margin-left: -200px ，这确实减少了 div 之间的空间，但是当调整窗口大小时图像与另一个 div 重叠，因此不起作用。有没有不同的方法来实现更小的空间？

Answer 1

这里有一些响应式设计的规则，它们将使您的网站对用户友好，同时为开发人员提供跨不同浏览器和操作系统的灵 active 和稳定性:

1. 使用“viewport”元数据将分辨率与访问者的设备宽度相关联，在使用 @media screen 时也是如此。 .

   <meta name="viewport" content="width=device-width,initial-scale=1.0">

2. 利用 CSS 跨浏览器支持引用:

-webkit- , -moz- , -ms-

例如-webkit-margin-left: 10px - 这只会影响 webkit 浏览器，例如 Chrome 。此外，如果您可以使用 JavaScript 添加基于用户代理输出 (navigator.userAgent) 的其他唯一类名。例如，有时 Chrome 渲染器在不同的操作系统(Windows 与 Mac)上会有所不同

1. 相对于 body 定位包装器，而 child 可以进行绝对定位以实现更隐蔽的控制。

例如

       `<div class="parent-div">
            <div class="child">
            </div>
       </div> 
       <style>
           .parent-div{
                position:relative;
           } 
           .child{
                position:absolute;/*absolute positioning of parent element*/
           }
       </style>`

1. 考虑使用 CSS 框架来自动化和加快您的工作。例如 Bootstrap http://getbootstrap.com/2.3.2/scaffolding.html