Question

我已经离开多年了，我已经开始了多年的第一次建造。这可能是几年编码生锈之前不会出现的问题！：我认为这是一个非常基本的问题，但它让我疯狂。

我已经建了两个容器。 Container1（红色的）将有一个图像，并很好地调整到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>

Answer 1

正如您在＃container1 中放置位置：绝对一样，当位置：相对时，它不会遵循页面的正常布局表示＃container2 的行为与默认值 position：static 的行为相同，直到您指定某种类型的顶部，左侧，右侧或底部。

因此解决这个问题的一种方法是删除绝对和相对定位。保持文档的流程不变。这会容易得多。

这里有一个link to an excellent tutorial来修改你的定位概念。它对我帮助很大。

我附上了相关代码的简化版本。看看吧。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Div未正确对齐

1 个答案: