div1 {

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

以下是响应式设计的若干规则，这些规则将使您的网站对用户友好，同时为您提供开发人员 - 灵活性和安全性。不同浏览器的稳定性和OS：

使用＆＃34; viewport＆＃34; meta将分辨率与访问者的设备宽度相关联，以及使用@media screen时。

<meta name="viewport" content="width=device-width,initial-scale=1.0">
使用CSS跨浏览器支持参考：

-webkit-，-moz-，-ms-

e.g。 -webkit-margin-left: 10px - 这只会影响webkit浏览器，例如铬。此外，如果您可以使用JavaScript根据用户代理输出（navigator.userAgent）添加其他唯一类名。例如，有时Chrome浏览器在不同的操作系统（Windows与Mac）上的呈现方式不同

将包装物相对于身体定位，而儿童可以绝对定位以进行更隐蔽的控制。

e.g。

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

考虑使用CSS框架自动化＆amp;加快你的工作。例如引导 http://getbootstrap.com/2.3.2/scaffolding.html

Answer 2

您可以为div元素使用负边距顶部。使用类来区分两个内部div。和CSS属性margin-top: -2px;。

在css文件中 `

div1 {

margin-top：-2px; }`

如何使两个div之间的空间变小

2 个答案:

div1 {