我对HTML和CSS中的框和定位有问题

Question

你好，我正在努力制作一个有趣的网站，看看我现在能用我的知识做多少！所以我有一个部分，我想把文本(h1，p(放在框中。我试着设置背景和一切，它看起来还可以，但在不同的分辨率下，它看起来不一样。。。盒子的大小并不是每个分辨率都一样。这是我特定部分的代码！

这是HTML代码：

.services {
background-color: rgb(36, 35, 35);
height: 50vh;
display: flex;
}
.services h1 {
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 27px;
}
.services p {
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.vpn {
background-color: rgb(29, 28, 28);
display: absolute;
flex-direction: row;
justify-content: left;
text-align: center;
margin-left: 80px;
transition: 0.3s;
border-top-style: solid;
border-top-width: 0px;
padding-top: 60px;
padding-left: 30px;
padding-right: 30px;
}
.email {
background-color: rgb(29, 28, 28);
display: absolute;
flex-direction: row;
text-align: center;
transition: 0.3s;
border-top-style: solid;
border-top-width: 0px;
padding-left: 30px;
}

<section class="services">
<div class="vpn">
<h1>VPN</h1>
<p>We have free DDoS protected VPN servers in multiple countries in Europe with no speed limits.</p>
<p>Our free VPN servers work on numrous streaming platforms.</p>
<p>They can also work on both Android and iOS mobile phones with OpenVPN Connect!</p>
</div>
<div class="email">
<h1>Custom E-Mail</h1>
<p>We offer email inboxes on multiple domains.
<p>We do not have limits, you can send and recieve as many emails as you like!</p>
</div>
</section>

Answer 1

我真的不能理解你的问题，但我注意到你的css代码中有一些错误。

1.没有display:absolute这样的东西，您可能想要使用display:flex，就好像display没有设置为flex一样-调整内容、flex方向属性根本不起作用。

2.您可能想要的不是显示：绝对，而是位置：绝对。

在你发布问题之前，你需要做一些研究，所以请做一些。

这里有一些有用的链接：

1.CSS位置属性

2.CSS FlexBox

.vpn {
background-color: rgb(29, 28, 28);
display: absolute; // display: flex;
flex-direction: row; // this property won't work without display: flex;
justify-content: left; // this property won't work without display: flex;
text-align: center;
margin-left: 80px;
transition: 0.3s;
border-top-style: solid;
border-top-width: 0px;
padding-top: 60px;
padding-left: 30px;
padding-right: 30px;
}
.email {
background-color: rgb(29, 28, 28);
*display: absolute; // display: flex;
flex-direction: row; // this property won't work without display: flex;
text-align: center;
transition: 0.3s;
border-top-style: solid;
border-top-width: 0px;
padding-left: 30px;
}

Answer 2

检查以下代码：

.services {
font-family: 'Source Sans Pro', sans-serif;
background-color: rgb(36, 35, 35);
min-height: 50vh;
display: flex;
justify-content: space-around;
color: white;
display: flex;
}
.box{
text-align: center;
width: 40vw;
}
.services h1{
font-weight: 400;
font-size: 27px;
}
.services p{
font-weight: 100;
font-size: 20px;
line-height: 1.3;
}

<section class="services">
<div class="box">
<h1>VPN</h1>
<p>We have free DDoS protected VPN servers in multiple countries in Europe with no speed limits.
<br>Our free VPN servers work on numrous streaming platforms.
<br>They can also work on both Android and iOS mobile phones with OpenVPN Connect!</p>
</div>
<div class="box ">
<h1>Custom E-Mail</h1>
<p>We offer email inboxes on multiple domains. 
<br>We do not have limits, you can send and recieve as many emails as you like!</p>
</div>
</section>