时间戳

首页 > 解决方案 > 我在 HTML 和 CSS 中的框和定位有问题

html - 我在 HTML 和 CSS 中的框和定位有问题

问题描述

您好，我正在尝试制作网站只是为了好玩，看看我现在可以用我的知识做多少！所以我有一个部分，我想将文本 (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>

标签： htmlcssposition

解决方案

我无法真正理解您的问题，但我注意到您的 css 代码中有一些错误。

1.没有 display: absolute 这样的东西，你可能想使用 display: flex，好像 display 没有设置为 flex - justify-content, flex-direction 属性根本不起作用。

2.而不是显示：绝对，也许你想要位置：绝对。

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

以下是一些有用的链接：

1. CSS 位置属性

2. CSS 弹性盒子

.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;
}

推荐阅读