时间戳

首页 > 解决方案 > Html Sections 或 Divs 在列中没有相互连接？

html - Html Sections 或 Divs 在列中没有相互连接？

问题描述

我正在使用 HTML 和 CSS 开发一个静态网站。该网站是单页的，如果是正确的词，我会使用部分来区分所有内容或部分。但我面临着进入第三部分的问题。前两部分如下所示。请看图片。

在此处输入图像描述

当我尝试在这两个之后制作另一个部分或第三部分时，我遇到了这个问题。我正在尝试做这样的事情

在此处输入图像描述

但每次我尝试一些东西时，我都会得到这样的东西。我不想为此使用大量 CSS 来将其放在正确的位置。这是我得到的图像。

在此处输入图像描述

我的代码我想用 CSS 和 HTML 做什么如下..

索引.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./style/style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- Section1 -->
    <section class="">
      <div class="headerPosition">
        <img src="./assets/HeaderImage2.jpg" class="headerImage1" />
        <div class="ehrlich-top-left" style="color: white">Example</div>
        <!-- <img class="headerOnImage" src="./assets/rectangle1.jpg"> -->
        <div class="opacityClass"></div>

        <div class="opacityClass1"></div>
        <div class="ehrlich-Center">
          Example
        </div>
        <div class="centered">
          WIR MACHEN &nbsp;ARBEITGEBER
        </div>
      </div>
    </section>

    <!-- Section2 -->
    <section class="">
      <div class="col-background">
        <hr
          style="background-color:black; width: 5%; float: left; top:8%; position: absolute;"
        />
        <h1 class="content_app_vertical">ÜBER UNS</h1>
        <h1 class="content_app">
          Was machen wir?
          <hr style="background-color:black; width: 20%" align="left" />
        </h1>
        <p class="container_content_app">
          Lorem Lorem Lorem Ipsum Ipsum Ipsum Lorem Lorem Lorem Ipsum Ipsum
          Ipsum Lorem Lorem Lorem Ipsum Ipsum Ipsum Lorem Lorem Lorem Ipsum
          Ipsum Ipsum Lorem Lorem Lorem Ipsum Ipsum Ipsum Lorem Lorem Lorem
          Ipsum Ipsum Ipsum Lorem Lorem Lorem Ipsum Ipsum Ipsum Lorem Lorem
          Lorem Ipsum Ipsum Ipsum Lorem Lorem Lorem Ipsum Ipsum Ipsum v vLorem
          Lorem Lorem Ipsum Ipsum IpsumLorem Lorem Lorem Ipsum Ipsum IpsumLorem
          Lorem Lorem Ipsum Ipsum Ipsumv
        </p>

        <img class="content_pic" src="./assets/wasmachen.jpg" />
      </div>
    </section>

    <!-- Section3 -->
    <section>
      <div class="big_box"></div>
    </section>
  </body>
</html>

样式.css

.rectangle1 {
  opacity: 0.75;
}

.headerPosition {
  position: relative;
  left: 0;
  top: 0;
}

.headerImage1 {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.headerOnImage {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.75;
  width: 50%;
  height: 100%;
}

@media (max-width: 1600px) {
  .ehrlich-Center {
    top: 30% !important;
  }
}

.ehrlich-Center {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: White;
  width: 413px;
  height: 30px;
  font-family: "PT Sans";
  font-size: 100px;
  font-weight: 100px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 51%;
  transform: translate(-50%, -50%);
  color: white;
  width: 413px;
  height: 30px;
  font-family: "PT Sans";
  font-size: 30px;
}

.ehrlich-top-left {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 35px;
}

.col-background {
  background-color: rgba(112, 112, 112, 0.15);
  width: 100%;
  height: 100%;
  position: absolute;
}
.col-background-2 {
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
}
.content_app {
  left: 20%;
  top: 10%;
  position: absolute;
  font-family: "PT Sans" !important;
  font-weight: 800;
  font-size: 3.5rem !important;
}

.opacityClass {
  background-color: rgba(255, 0, 0, 0.75);
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.75;
  width: 50%;
  height: 100%;
}

.opacityClass1 {
  background-color: rgba(255, 0, 0, 0);
  position: absolute;
  top: 155px;
  left: 80px;
  width: 85%;
  height: 50%;
  transform: rotate(180deg);
  border: solid white;
}

.opacityClass2 {
  background-color: rgba(255, 0, 0, 0);
  position: absolute;
  top: 211%;
  left: 130px;
  width: 85%;
  height: 50%;
  transform: rotate(-360deg);
  border: solid red;
}

.container_content_app {
  width: 452px;
  height: 277px;
  left: 20%;
  top: 25%;
  font-family: "PT Sans" !important;
  position: absolute;
  font-size: 14px;
}

.content_app_vertical {
  transform: rotate(-90deg);
  position: absolute;
  top: 20%;
  float: left;
  left: -50px;
  margin: 0;
}

.content_pic {
  top: 20%;
  left: 60%;
  position: relative;
  width: 446px;
  height: 356px;
}

@media (max-width: 1500px) {
  .container_content_app {
    top: 35% !important;
  }
  .content_app_vertical {
    top: 35% !important;
  }
  .content_pic {
    width: 355px;
    height: 250px;
  }
}

.big_box {
  width: 1316px;
  border: 2px solid red;
  height: 356px;
  position: absolute;
  /* left: 10%;
  top: 190%; */
}
.box {
  display: block;
  border: 2px solid white;
  text-align: center;
  width: 100%;
}

标签： htmlcss

解决方案

推荐阅读