1
我已经离开了很长时间,我开始了我的第一个建造多年。这可能是几年来编码防锈之前不会成为问题的东西!:我认为这是一个非常基本的问题,但它让我感到非常紧张。部门没有正确对齐
我已经构建了两个容器。容器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>
制作容器中的两个显示块,而不是内联块,并给予一试 –
您可能还检查了''