html - 使 DIV 在其他分辨率和屏幕尺寸上看起来正确对齐?
问题描述
我一直在这个网站上工作,我把它编码在我的电脑上看起来很完美,当我把它缩小到移动尺寸时也很完美。但是,当我在笔记本电脑上查看它时,左侧带有文本的 DIV 总是向上或向下撞到不合适的位置。同样在笔记本电脑上,在移动尺寸中,图像/框之间存在不需要的空间。解决此问题的最简单方法是什么?我是否设置了所有错误?另外,我如何解释每个屏幕尺寸和分辨率?似乎文本框可以以不同的方式或其他方式完成,以使其更容易保持原位。
任何帮助将不胜感激!
头:
<!DOCTYPE html>
<html>
<title>Jesse Ellis | Personal Chef</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Caladea&display=swap" rel="stylesheet">
CSS:
<style>
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body, html {
height: 100%;
line-height: 1.8;
margin: 0;}
.firstrowpad{padding-top:0px; height: 50%; padding-bottom:0px;}
h1,h4,h5,h6 {font-family: 'Caladea', serif;}
h3{
font-family: 'Caladea', serif;
font-weight: normal;
font-size: 4em;
}
h2{
font-family: 'Caladea', serif;
font-weight: normal;
font-size: 2em;
}
.bgoverlay {
position: relative;
background-image: url("https://eaternalzest.com/wp-content/uploads/2019/04/08.0_Seafire_180219.jpg");
background-size: auto;
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0;
background-size: 100%;
min-height: 71%;
}
.bgoverlay:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0.9;
background-color: #053426;
}
.FirstRow{
background-image: url("https://miro.medium.com/max/9792/1*-xHF1a7BT8hN8KsHbQCDSw.jpeg");
background-position: right;
background-color: #f1f1f1;
background-repeat: no-repeat;
background-size: 50%;
}
.HeaderFont{
font-size: 1.5em;
top: 4%;
width: 20%;
left: 51%;
position: relative;
background: #ffffff;
opacity: 0.9;
line-height: 19pt;
padding: 20px;
padding-top: 30px;
padding-bottom: 30px;
letter-spacing: 2px;
font-family: 'Caladea', serif;
border-right: solid #ccc 0px;
border-radius: 25px;
}
.HeaderBlog{
font-size: 1.5em;
top: -24%;
width: 47.7%;
height: 91%;
overflow: hidden;
left: 1%;
position: relative;
background: #ffffff;
line-height: 30pt;
padding: 30px;
font-family: 'Caladea', serif;
padding-bottom: 240px;
padding-top: 90px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 20px solid #BF845C;
}
hr.solid {
border-top: 15px solid #733938;
content: '';
}
@media screen and (max-width: 900px) {
.FirstRow {
background-size: 100%;}
.HeaderFont{
display: none;}
.HeaderBlog{
display: none;}
.HeaderBlog2{
font-size: 1.5em;
top: 250%;
width: 100%;
height: 50%;
overflow: hidden;
position: static;
background: #ffffff;
padding: 30px;
display: inline-block;
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0;
background-size: 100%;
min-height: 51%;
}
}
@media screen and (min-width: 1024px) {
.HeaderBlog2{
display: none;}
}
</style>
HTML:
<header class="bgimg-1 bgoverlay">
</header>
<div class="FirstRow firstrowpad">
<div class="HeaderFont"><center> ❝ A dining experience <br>from the comfort of <br>your own <i>home</i>. ❞</center></div>
<div class="HeaderBlog">
<font style="font-size: 2em;"> J</font>esse Ellis is a personal chef for hire in Wilmington, NC and the surrounding area. Wether you are hosting, having a party, or just dinner with the family, he will cook in your kitchen
and deliver custom quality meals. All you have to do is sit back and enjoy the food!<p><p>
<hr class="solid"></hr>
</div>
</div>
<div class="HeaderBlog2">
<center>
Jesse Ellis is a personal chef for <br>hire in the Wilmington, NC area. <br>
Specializing in all types of foods, <br>
he cooks in your kitchen to deliver quality meals.<p><p>
</center>
<hr class="solid">
</div>
</div>
解决方案
推荐阅读
- angular - springboot中集成angular的proxy.conf.json
- python - TypeError:“元组”对象在 python cdsapi 中不可调用
- azure - 从 ASP.NET Core 中的 azure B2C 应用程序请求 JWT
- asp.net-core - ASPNET Eager Loading 不适用于 HashSet
- c++ - 实现为特定操作系统量身定制的重做键盘快捷键
- python - 如何获取三个列表的每个列表唯一的值?
- rust - Rustlazy_static 变量 RwLock 访问
- python - Pandas:从列表中选择包含任何子字符串的行
- javascript - 从 javascript 文件调用时,函数不会在剃须刀页面上执行
- python - 为什么变量替换在 Python 嵌套循环中不起作用