时间戳

首页 > 解决方案 > 如何以响应方式将我的图像定位在标题的最后一行？

html - 如何以响应方式将我的图像定位在标题的最后一行？

问题描述

我正在创建一个网站页面，该页面应该对桌面和移动浏览器都有响应。

我有一个标题，高度为 60 vh，我有 3 个图像应该水平放置在标题的末端行。

我曾经position: relative;将图像放置在它们之间 3% 的空间。

当测试移动设备和平板电脑屏幕上的响应能力时，问题就开始了，我发现我的图像在标题的结束行上方，这意味着图像“垂直”位于错误的位置。

PS：我在这两种情况下的图像都以正确的方式水平对齐

我想在所有屏幕中将图像粘贴到标题的最后一行，如下所示： 图 1

但相反，我在非桌面屏幕上得到了它：

图 2

这是我的代码

HTML

   <header class="header">
      <div class="sup-header"><span>gtd.</span></div>
      <div class="welcome-msg"><h1>Hello, we're gtd.</h1></div>

      <div class="sub-header">  
        <div class="sub-header-imgs">
          <img src="media/img_lisa_circle.png" class="sub-header-img">
          <img src="media/img_danielle_circle.png" class="sub-header-img">
          <img src="media/img_brian_circle.png" class="sub-header-img">
        </div>
     </div>
   </header>

CSS

.header {
  width: 100%;
  height: 60vh;
  background: url('../media/img_hero.jpg') no-repeat;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 80%;
}

.sub-header {
  position: relative;
  top: 36%;
}

.sub-header-imgs {
  width: 100%;
  height: 100%;
  text-align: center;
}
.sub-header-img {
  width: 10%;
  height: 10%;
  margin: 0 3%;
}

那么为什么图像垂直定位不响应并在小屏幕中向上移动而不是保持在标题的末端线的中间？以及如何解决？

标签： htmlcss

解决方案

推荐阅读