我正在尝试在页面的顶部中心构建一个 header ，其中包含两个名称，中间有一个环居中。我还有一张位于页面中间的图片。在我调整大小之前，在全屏笔记本电脑上一切看起来都不错 浏览器和一切都在移动，看起来很困惑。我读了很多 发布后，每个人都说使用具有最小宽度和用户百分比的包装器以及您的 div 中的包装器。我读了一个星期后还是想不通 以及我可能做的一切。
HTML:
<body>
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
<div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
</body>
</html>
CSS:
.wrapper {
min-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.michael{
color:#EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 30px;
max-width: 100%;
max-height: 100%;
left: 30%;
top: 0%;
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead{
position: fixed;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 4%;
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina{
color:#EEE8AA;
position: fixed;
left: 70%;
top: 0%;
text-transform: uppercase;
font-size: 30px;
max-width:100%;
max-height: 100%;
}
.c{
max-width: 100%;
max-height: 100%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
最佳答案
如果使用 position: relative; 而不是 position: absolute; 可能会更容易一些
而且您没有正确关闭 div class="Michael"> 您忘记了关闭 div 标签中的/。
我没有图片，但想出了一个屏幕宽度小至 500 像素的东西。
HTML:
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
</div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" `enter code here`width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
CSS:
.wrapper {
width: 479px;
height: 100px;
margin: 0 auto;
/* padding: 0 5%; */
display: block;
}
.michael {
color: #EEE8AA;
position: relative;
text-transform: uppercase;
font-size: 30px;
width: 200px;
float: left;
display: inline-block;
border: 1px solid black;
/* max-width: 100%; */
/* max-height: 100%; */
/* left: 30%; */
/* top: 0%; */
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead {
position: relative;
/* max-width: 100%; */
/* max-height: 100%; */
float: left;
border: 1px solid black;
display: inline-block;
/* left: 50%; */
/* top: 4%; */
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina {
color: #EEE8AA;
position: relative;
float: left;
border: 1px solid black;
/* top: 0%; */
text-transform: uppercase;
font-size: 30px;
/* max-width: 100%; */
/* max-height: 100%; */
}
.c{
max-width: 100%;
max-height: 100%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
这是 fiddle 的链接:https://fiddle.jshell.net/hzxsvLzz/1/
关于html - 在 html 和 css 中调整大小收缩，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37199499/