部門沒有正確對齊

我已經離開了很長時間，我開始了我的第一個建造多年。這可能是幾年來編碼防鏽之前不會成爲問題的東西！：我認爲這是一個非常基本的問題，但它讓我感到非常緊張。部門沒有正確對齊

我已經構建了兩個容器。容器1（紅色）應該有一個圖像，並很好地調整到70％的顯示。

Container2（綠色的）是用於標題等，但我不能讓它坐在Container1下。目前它堅守在頁面頂部。

任何與此有關的幫助將大規模讚賞。

#container1 { 
 
    width: 70%; 
 
    height: 70%; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 136px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: red; 
 
    z-index: 2; 
 
    display: inline-block; 
 
} 
 

 
#container2 { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: relative; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: green; 
 
    z-index: 2; 
 
    display: inline-block; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    position: absolute; 
 
    margin: auto; 
 
    border: 4px solid #ffffff; 
 
    border-bottom: 4px solid #ffffff; 
 
    box-shadow: 1px 1px 5px 1px #c9c9c9; 
 
    top: 0; 
 
    padding-bottom: 0px; 
 
    left: 0; 
 
    right: 0; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="layout.css"> 
 
</head> 
 

 
<body> 
 

 
    <div id="container1"> 
 
    <img src="image.jpg" alt="image" style="padding: 0px 0px 0px 0px;" align="center" /> 
 
    </div> 
 

 
    <div id="container2"> 
 
    CAPTION INFO TO GO HERE 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-07-29 The Nuge

製作容器中的兩個顯示塊，而不是內聯塊，並給予一試 –

您可能還檢查了''

標籤。它默認包含圖像和標題的空間。是的，放棄絕對/相對定位，沒有必要。 –

正如你已經把位置：絕對在＃container1，它並不按照頁面的正常佈局，同時位置：相對意味着＃container2的的行爲與默認設置相同，位置：靜態，直到指定某種頂部，左側，右側或底部。

所以解決這個問題的一種方法是去除絕對和相對定位。按原樣保持文檔流。它會容易得多。

這是link to an excellent tutorial修改您的定位概念。這對我幫助很大。

我附上了相關代碼的簡化版本。一探究竟。

#container1 { 
 
width: 70%; 
 
height: 170px; 
 
margin: 20px auto 10px auto; 
 
background-color: red ; 
 
} 
 

 

 
#container2 { 
 
width: 100%; 
 
height: 50px; 
 
background-color: green ; 
 
} 
 

 

 
img { 
 
max-width: 100%; 
 
max-height: 100%; 
 
margin: 0 auto; 
 
border: 4px solid #ffffff; 
 
border-bottom: 4px solid #ffffff; 
 
box-shadow: 1px 1px 5px 1px #c9c9c9; 
 
padding-bottom: 0px; 
 
}

<div id="container1"> 
 
<img src="image.jpg" alt="image" style="padding: 0px 0px 0px 0px;" 
 
align="center" /> 
 
</div> 
 

 
<div id="container2"> 
 
CAPTION INFO TO GO HERE 
 
</div>

來源

2017-07-29 20:23:39

部門沒有正確對齊

回答

相關問題