部门没有正确对齐

问题描述：

我已经离开了很长时间，我开始了我的第一个建造多年。这可能是几年来编码防锈之前不会成为问题的东西！：我认为这是一个非常基本的问题，但它让我感到非常紧张。部门没有正确对齐

我已经构建了两个容器。容器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>

制作容器中的两个显示块，而不是内联块，并给予一试 –

您可能还检查了''

标签。它默认包含图像和标题的空间。是的，放弃绝对/相对定位，没有必要。 –

答

正如你已经把位置：绝对在＃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>

部门没有正确对齐

相关推荐