我有一个布局分配，它需要看起来像这样:布局任务
我已经试过了，到目前为止，它看起来像这样:my page part 1
my page part 2
我在调整徽标时遇到了麻烦，就像在作业中被要求的那样，当你从右边开始计数时，第四个div不会延伸2div。
赋值的第二部分看起来应该是这样的:
布局分配第二部分
我不知道怎么做，也不知道如何根据作业要求调整大小。
这是我的html和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;
}<!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>我从这次作业中学到了很多，我希望如果有人能给我解决这个问题的方法，它会给我足够的知识来进一步前进。
对于调整小屏幕的大小，我建议使用媒体查询，它看起来像这样:
@media only screen and (max-width: 760px) {
h1 {
...
}
p {
..
}
}
此外，你可以使用相对大小:
- em相对于元素的字体大小(2em表示当前字体大小的2倍)
- ex相对于当前字体的x-height(很少使用)
- ch相对于"0"(零)
- rem相对于根元素的字体大小
- vw相对于视口宽度的1% *
- vh相对于视窗高度的1% *
- vmin相对于1%的视口*较小的尺寸
- vmax 相对于1%的视口*大尺寸
- %相对于父元素
对于一个项目的具体定位，我会使用，例如:
{
position:absolute;
bottom:0;
left:0;
}
https://developer.mozilla.org/de/docs/Web/CSS/position
你也可以使用:
paddingmargin左右上下