如何使用CSS将footer内的div元素移动到右上角位置

解决方案 #

你当前的方案失效是因为div为块级元素，默认独占一行，仅调整margin-left只能在当前行做水平偏移，无法和上方的学校名称模块水平并排，可通过Flex布局实现需求：

1 调整HTML结构

将学校logo、名称部分单独包裹为一个容器，方便Flex布局统一控制子元素排版：

<footer>
  <div class="footer">
    <!-- 新增学校信息包裹容器 -->
    <div class="footer-brand">
      <br>
      <h1><img src="imageedit_2_7258851370.gif">  Genius High School</h1>
      <br>
    </div>
    <div class="links">
      <h1><i class="fas fa-link"></i>  Links</h1>
      <ul class="navtwo">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="academics.html">Academics</a></li>
        <li><a href="worksheets.html">Worksheets</a></li>
        <li><a href="circulars.html">Circulars</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="message.html">Message</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div class="tel">
      <h1><i class="fas fa-phone"></i>  Get in touch</h1>
      <br>
      <a class="phone_number" href="tel:+91-934-638-8595">+91-934-638-8595</a>
    <br>
      <a class="phone_number" href="tel:+91-970-026-0200">+91-934-638-8595</a>
    <br>
    <a class="phone_number" href="email:geints2013@gmail.com">geints2013@gmail.com</a>
    <br>
    <br>
    <br>
    <br>
    </div>
  </div>
</footer>

2 替换原有CSS代码

给父容器开启Flex布局，实现子元素水平分散排列、顶部对齐：

.footer {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.tel a {
  color: #0b0069;
  text-decoration: none;
  font-size: medium;
}

如果需要调整三个模块的间距，修改gap属性值，或者给对应子模块添加左右内边距/外边距即可。

内容的提问来源于stack exchange，提问作者Iam coding