我在另一個div中有兩個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重疊，因此無法工作。有沒有不同的方式來實現更小的空間？

來源

2017-10-14 dollaza

下面是響應式設計的一些規則，這會讓你的網站用戶友好，同時給你作爲一個開發人員 - 靈活性&穩定性在不同瀏覽器& OS：

使用「視「將分辨率與訪問者的設備寬度以及使用@media screen時的分辨率結合起來。

<meta name="viewport" content="width=device-width,initial-scale=1.0">
。利用CSS跨瀏覽器支持參考文獻：

-webkit-，-moz-，-ms-

例如-webkit-margin-left: 10px - 這隻會影響webkit瀏覽器。鉻。另外，如果可以使用JavaScript基於用戶代理輸出（navigator.userAgent）添加其他唯一類名稱。例如，有時在不同的操作系統上Chrome瀏覽器渲染器會有所不同（Windows與Mac）

相對於身體定位包裝，而兒童可以爲隱身控制提供絕對定位。

例如

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

考慮使用CSS框架，你的工作自動化&加快。例如Bootstrap http://getbootstrap.com/2.3.2/scaffolding.html

來源

2017-10-14 01:19:36 SergeDirect

您可以對div元素使用負邊距頂部。使用class來區分兩個div的內部。和CSS屬性margin-top: -2px;。

在CSS文件 '

DIV1 {

邊距：-2px; }`

來源

2017-10-14 00:56:35

如何使兩個div之間的空間更小

回答

DIV1 {

相關問題