如何配置CSS实现760px以下屏幕的布局调整 完成前端布局作业

参考效果 #

• 作业要求实现效果：Layout Assignment
• 已完成的效果：
  • my page part 1
  • My page part 2
• 响应式要求（屏幕宽度小于760px时的适配效果）：Layout assignment part 2

遇到的问题 #

• 无法按照作业要求调整logo的样式和位置
• 从右侧数第四个div没有实现跨2个div宽度的拉伸效果
• 不清楚如何修改现有CSS完成对应尺寸调整

现有代码 #

CSS代码 #

.header {
  display: grid;
  border: crimson 3px solid;
  grid-row-gap: 1em;
  height: auto;
}

.fantasy {
  margin-left: 400px;
}

.content {
  display: grid;
  grid-template-columns: 70% 30%;
  /*
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  */
  grid-gap: 1em;
}

.content>div {
  background: #eee;
}

.content>div:nth-child(odd) {
  background: #ddd;
}

.footer {
  background-color: cadetblue;
  width: 100%;
}

.fotografi {
  width: 100%;
  height: auto;
}

.logo {
  width: 10%;
  height: auto;
}

HTML代码 #

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

  <div class="header">
    <img class="logo" src="foto/logo.jpeg">
    <h2 class="fantasy">Fantasy Wallpapers</h2>
  </div>

  <br/>

  <div class="content">
    <div>
      <img class="fotografi" src="foto/mountaingate.jpg">
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div class="divcolumn">
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
  </div>

  <div class="footer">
    <h3>Fantasy Wallpaper</h3>
  </div>
</body>

</html>

1. 调整logo与标题布局 #

修改header的grid配置，实现logo和标题的横向排列、位置对齐：

.header {
  display: grid;
  border: crimson 3px solid;
  grid-template-columns: auto 1fr; /* 第一列适配logo宽度，第二列占剩余空间 */
  align-items: center; /* 垂直居中对齐两个元素 */
  padding: 1em;
  gap: 2em; /* 两个元素的间距 */
}
/* 移除固定左外边距，改为对齐控制 */
.fantasy {
  margin: 0;
  text-align: center; /* 可根据作业要求调整为left/right */
}
/* 优化logo尺寸控制 */
.logo {
  width: 80px; /* 可根据设计要求调整固定值，也可保留百分比限制最大宽度 */
  max-width: 10%;
  height: auto;
}

2. 实现指定div跨列效果 #

你提到的从右侧数第四个div对应content容器下的第2个子元素，添加跨列属性即可：

.content > div:nth-child(2) {
  grid-column: span 2; /* 横向跨越2列 */
}
/* 如果实际需要跨列的是其他div，修改nth-child的参数即可，比如要让最后一个div跨列就写 .divcolumn {grid-column: span 2;} */

3. 实现小于760px的响应式适配 #

添加媒体查询，适配小屏幕布局：

@media (max-width: 760px) {
  .content {
    grid-template-columns: 1fr; /* 改为单列布局 */
  }
  .header {
    grid-template-columns: 1fr; /* logo和标题改为上下排列 */
    justify-items: center; /* 水平居中 */
  }
}

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