叹今绫罗烟消散。 2022-03-27 17:57 采纳率: 100%
浏览 16
已结题

div的文字和图片动作不同步

各位,我把图片和文字放在同一div里,但是菜单栏放出来的时候只有图片往下移动了,文字没有动,请问应该怎么改才能让文字和图片同步?

HTML

<!DOCTYPE html>
<!-- 声明文档类型-->
<html lang="en">
<!-- 确定语言形态 -->
<head>
    <meta charset="UTF-8">
<!--控制网页的编码格式 utf-8 国际性编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--控制视口比例以及缩放-->
    <title>沐风工作室-官网</title>
    <!-- 先引入重置样式表和公共样式表以及主页样式表 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
 <!-- 这个顺序引入更规范 -->
 
</head>
 
<body>
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">沐风工作室</a>
    </div>
  <div class="collapse navbar-collapse" id="example-navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">iOS</a></li>
      <li><a href="#abc">SVN</a></li>
      <li class="dropdown">
        <a href="#" class="dropdow-toggle" data-toggle="dropdown">Java <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">jmeter</a></li>
          <li><a href="#">EJB</a></li>
          <li><a href="#">Jasper Report</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
          <li class="divider"></li>
          <li><a href="#">另一个分离的链接</a></li>
        </ul>
      </li>
    </ul>
  </div>
  </div>
  </nav>
    <div id="dataImage" style="no-repeat;z-index:-1;">
        <img src="./Home/home.jpg" style="width:100%;height:100%" />
      <h2 id="title">沐风工作室</h2>
      <h3 id="title_2">—一个充满活力的工作室—</h3>
    </div>
    <h1 style="text-align: center;">产品介绍</h1>
    <div id="round_1">
      <p>很高兴你能找到这里,但是令人难过的事我们并没有什么作品,因为这个工作室只有我一个人。<br>但我相信在不久的将来,沐风工作室会有更多的大佬加入,一起打造一片属于我们的天地!<br>如果你也感兴趣的话,欢迎加入!!哪怕你一无所有就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生就算生活再累再辛苦,只要有一个坚定的伙伴就可以了,这就是人生</p>
    </div>
  </body>
  
  </html>

CSS

#dataImage {
  margin-top: -20px;
}


#title {
  position: absolute;
  top: 116px;
  left: 30%;
  color: #0AFFF6;
}

#title_2 {
  position:absolute;
  top: 150px;
  left: 120px;
  font-size: 70%;
  color: #FF0000;
}

#round_1 {
  background-image: url('./logo/logo.png');
  margin: 10px;
  border: 1px solid #FFFFFF;
  padding: 5px;
  border-radius: 25px;
  
}

img

img

img

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-03-27 18:41
    关注

    #dataImage加个position:relative

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 4月5日
  • 已采纳回答 3月28日
  • 创建了问题 3月27日

悬赏问题

  • ¥15 请问一下这个运行结果是怎么来的
  • ¥15 这个复选框什么作用?
  • ¥15 单通道放大电路的工作原理
  • ¥30 YOLO检测微调结果p为1
  • ¥20 求快手直播间榜单匿名采集ID用户名简单能学会的
  • ¥15 DS18B20内部ADC模数转换器
  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式(有相互嵌套)
  • ¥30 关于#算法#的问题:运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下