Question

我正在尝试创建宽度为100％且高度为100％的3个div，以便每个div占据整个屏幕。每个div都有一个文本，图像放在整个div的底部中间。

<div class="first">
     <p>Some text is inserted here</p>
     <img src="some-image" class="img img-responsive"/>
</div>
<div class="second">
     <p>Some text is inserted here</p>
      <img src="some-image" class="img img-responsive"/>
</div>
<div class="third">
     <p>Some text is inserted here</p>
     <img src="some-image" class="img img-responsive"/>
</div>

因此，我给出了图像的绝对定位和主要div的相对位置，并为绝对定位的图像提供了一些百分比值，这样即使屏幕调整大小，它们也能在底部中心正确对齐。

.first{
  width : 100%;
  height : 100%;
  position : relative;
 }
.second{
  width : 100%;
  height : 100%;
  position : relative;
 }
.third{
  width : 100%;
  height : 100%;
  position : relative;
 }
 img{
  position : absolute;
  top : 60%;
 }

当我调整窗口大小时，我的问题也出现了问题，因为它的响应速度也得到调整，并且当图像大小越来越大时，它的位置绝对正确，它会在文本上重叠。如何在响应式屏幕中摆脱这种重叠？提前谢谢：）

Answer 1

如果要创建响应式布局，CSS Flexbox模块是一个非常好的起点。如果我已经理解了您正在尝试正确实现的布局的描述，这里有一个示例，说明如何在Flexbox中创建该布局：

body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}

div {
flex: 1 0 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
min-height: 100vh;
}

.first{
background-color:red;
}

.second{
background-color:yellow;
}

.third {
background-color:green;
}

img {
width: 40vw;
height: 10vw;
margin-bottom:12px;
background-color: rgba(0,0,0,0.3);
border: 4px solid rgba(0,0,0,0.4);
}

<div class="first">
<p>Some text is inserted here</p>
<img src="some-image" class="img img-responsive"/>
</div>

<div class="second">
<p>Some text is inserted here</p>
<img src="some-image" class="img img-responsive"/>
</div>

<div class="third">
<p>Some text is inserted here</p>
<img src="some-image" class="img img-responsive"/>
</div>

绝对定位的图像在响应

1 个答案: