当前位置： 文江博客话题详情

使用转换后删除空格

发布于 2025-02-10 12:14:02 字数 7363 浏览 1 评论 0原文

所以我正在研究HTML水疗中心。我创建了部分，并希望每个部分以40:60的比例水平划分。问题在于，当我想在列中垂直中心内容时，它在列的末尾留下了许多空白。这不是一个大问题，但是在最后一列之后，剩下很多白空间，这绝对没有吸引力。

“问题“

我的代码片段：

*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vw;
  margin: 0;
  padding: 0;
  background-color: #23272e;
  color: whitesmoke;
}

section {
  width: 100%;
  height: 100vh;
  float: left;
}

section:nth-child(2) {
  background-color: green;
}

.section-content {
  height: calc(100vh - 1.5rem);
}

.row {
  height: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  height: 100%;
  padding: 1.5rem;
  margin: 0;
}

.col-left {
  width: 40%;
  height: 100%;
  text-align: center;
}

.col-right {
  width: 60%;
  height: fit-content;
  text-align: start;
}

.col-content {
  display: inline-block;
  height: 100%;
  transform: translateY(50%);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

编辑：CSS在代码中也无法正常工作，也发布了我的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      *,
      ::after,
      ::before {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      body {
          width: 100vw;
          height: 100vw;
          margin: 0;
          padding: 0;
          background-color: #23272e;
          color: whitesmoke;
      }

      section {
        width: 100%;
        height: 100vh;
        float: left;
      }

      section:nth-child(2) {
        background-color: green;
      }

      .section-content {
        height: calc(100vh - 1.5rem);
      }

      .row {
        height: 100%;
      }

      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      .column {
        float: left;
        height: 100%;
        padding: 1.5rem;
        margin: 0;
      }

      .col-left {
        width: 40%;
        height: 100%;
        text-align: center;
      }

      .col-right {
        width: 60%;
        height: fit-content;
        text-align: start;
      }

      .col-content {
        display: inline-block;
        height: 100%;
        transform: translateY(50%);
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

问题： 如您所见，页面末尾有空白空间。

预期行为： 页面末尾没有空白空间。

原文

So I was working on an HTML SPA. I created sections and wanted each section to be horizontally split in 40:60 ratio. The problem is that when I want to vertically center content in the columns, it is leaving a lot of white space at the end of the column. This is not a big problem but after the last column a lot of white space is left which is definitely unappealing.

The Problem

A snippet of my code:

*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vw;
  margin: 0;
  padding: 0;
  background-color: #23272e;
  color: whitesmoke;
}

section {
  width: 100%;
  height: 100vh;
  float: left;
}

section:nth-child(2) {
  background-color: green;
}

.section-content {
  height: calc(100vh - 1.5rem);
}

.row {
  height: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  height: 100%;
  padding: 1.5rem;
  margin: 0;
}

.col-left {
  width: 40%;
  height: 100%;
  text-align: center;
}

.col-right {
  width: 60%;
  height: fit-content;
  text-align: start;
}

.col-content {
  display: inline-block;
  height: 100%;
  transform: translateY(50%);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

EDIT: The CSS isn't working properly in the snippet, posting my code too.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      *,
      ::after,
      ::before {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      body {
          width: 100vw;
          height: 100vw;
          margin: 0;
          padding: 0;
          background-color: #23272e;
          color: whitesmoke;
      }

      section {
        width: 100%;
        height: 100vh;
        float: left;
      }

      section:nth-child(2) {
        background-color: green;
      }

      .section-content {
        height: calc(100vh - 1.5rem);
      }

      .row {
        height: 100%;
      }

      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      .column {
        float: left;
        height: 100%;
        padding: 1.5rem;
        margin: 0;
      }

      .col-left {
        width: 40%;
        height: 100%;
        text-align: center;
      }

      .col-right {
        width: 60%;
        height: fit-content;
        text-align: start;
      }

      .col-content {
        display: inline-block;
        height: 100%;
        transform: translateY(50%);
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

The problem:
Whitespace at the end of page
as you can see there is and undesirable blank space at the end of the page.

Expected behaviour:
Expected behaviour
No blank space at the end of page.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

太阳男子 2025-02-17 12:14:03

如果您想垂直将内容集中在DIV中，则有许多解决方案： /a>，

但由于这种情况是因为翻译（移动）div的高度溢出了其包含的div，您只需添加它即可。 （但这只是一个快速修复

.col-left {
    overflow: hidden;
}

If you want to center content vertically inside a div, there are many solutions: https://stackoverflow.com/a/2939979/3807365

But since this happens because the height of the translated (moved) div overflows its containing div you can just add this. (but it's just a quick fix because half of the content would be lost if it takes all the height)

.col-left {
    overflow: hidden;
}
回复 原文
倾｀听者〃 2025-02-17 12:14:03

这是您要实现的目标？我已经使用了flexbox。 （请参阅全页上的摘要结果）

.container>section {
  height: 500px;
  display: flex;
}

.container>section>div:nth-child(1) {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container>section>div:nth-child(2) {
  width: 60%;
}

.container .section-1 {
  background-color: skyblue;
}

.container .section-2 {
  background-color: pink;
}

.container .section-3 {
  background-color: yellow;
}
<div class="container">
  <section class="section-1">
    <div>heading</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui veritatis neque iure animi quae placeat labore eligendi a, rem architecto delectus dicta hic aspernatur vitae perferendis sed blanditiis maiores iusto porro natus ipsa similique tenetur?
      Doloremque saepe eius natus repellat ullam! Porro quibusdam omnis assumenda facere facilis tempore expedita, nisi pariatur, non temporibus soluta ab veritatis eius sunt quaerat adipisci laudantium eligendi mollitia quis earum perspiciatis delectus
      explicabo magnam! Culpa ducimus voluptatem suscipit aliquid? Nisi, minus incidunt! Atque corporis voluptate ipsum, vero mollitia molestias sed totam expedita quia dolor neque nobis alias cum impedit ut necessitatibus beatae reiciendis maxime! Excepturi!</div>
  </section>
  <section class="section-2">
    <div>heading</div>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium voluptatibus quis aperiam qui nulla quaerat voluptatem voluptas consectetur, consequatur est accusamus inventore. Recusandae, dolorum accusamus. Omnis assumenda labore, repellendus
      impedit rerum ratione architecto alias sequi vero at consequuntur voluptatem similique blanditiis exercitationem. Ipsa reiciendis, est, dolore harum at architecto error aliquid ullam dolorum magnam nobis nam. Ab cum consectetur quibusdam minus eum
      alias commodi suscipit autem. Dolore velit beatae saepe nesciunt harum accusantium natus qui fugiat, accusamus, commodi maxime nostrum explicabo fuga omnis temporibus obcaecati modi sequi perferendis! Illo, optio ab. Explicabo distinctio consequuntur
      molestiae veniam, ducimus sit exercitationem id.</div>
  </section>
  <section class="section-3">
    <div>heading</div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum recusandae laboriosam sed molestiae illo, earum, ad vero dolor deserunt reprehenderit dicta temporibus suscipit itaque vel alias similique voluptas nam iusto velit excepturi distinctio
      placeat. Dolorem voluptatum doloribus hic vero neque fugit unde culpa impedit reprehenderit ab rerum corrupti consequuntur iusto sed totam velit voluptates eius, animi aut. Quisquam, iusto nulla, nisi dolorum maiores doloremque maxime quos ullam
      accusantium consequatur molestias, adipisci itaque iure molestiae vero aliquid velit dolore esse? Cum nihil quidem eligendi obcaecati itaque, sapiente ullam cumque excepturi fuga numquam voluptate repudiandae laboriosam corrupti quisquam accusantium
      nisi adipisci nemo?</div>
  </section>
</div>

使用网格

.container>section {
  height: 500px;
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.container>section>div:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .section-1 {
  background-color: skyblue;
}

.container .section-2 {
  background-color: pink;
}

.container .section-3 {
  background-color: yellow;
}
<div class="container">
  <section class="section-1">
    <div>heading</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui veritatis neque iure animi quae placeat labore eligendi a, rem architecto delectus dicta hic aspernatur vitae perferendis sed blanditiis maiores iusto porro natus ipsa similique tenetur?
      Doloremque saepe eius natus repellat ullam! Porro quibusdam omnis assumenda facere facilis tempore expedita, nisi pariatur, non temporibus soluta ab veritatis eius sunt quaerat adipisci laudantium eligendi mollitia quis earum perspiciatis delectus
      explicabo magnam! Culpa ducimus voluptatem suscipit aliquid? Nisi, minus incidunt! Atque corporis voluptate ipsum, vero mollitia molestias sed totam expedita quia dolor neque nobis alias cum impedit ut necessitatibus beatae reiciendis maxime! Excepturi!</div>
  </section>
  <section class="section-2">
    <div>heading</div>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium voluptatibus quis aperiam qui nulla quaerat voluptatem voluptas consectetur, consequatur est accusamus inventore. Recusandae, dolorum accusamus. Omnis assumenda labore, repellendus
      impedit rerum ratione architecto alias sequi vero at consequuntur voluptatem similique blanditiis exercitationem. Ipsa reiciendis, est, dolore harum at architecto error aliquid ullam dolorum magnam nobis nam. Ab cum consectetur quibusdam minus eum
      alias commodi suscipit autem. Dolore velit beatae saepe nesciunt harum accusantium natus qui fugiat, accusamus, commodi maxime nostrum explicabo fuga omnis temporibus obcaecati modi sequi perferendis! Illo, optio ab. Explicabo distinctio consequuntur
      molestiae veniam, ducimus sit exercitationem id.</div>
  </section>
  <section class="section-3">
    <div>heading</div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum recusandae laboriosam sed molestiae illo, earum, ad vero dolor deserunt reprehenderit dicta temporibus suscipit itaque vel alias similique voluptas nam iusto velit excepturi distinctio
      placeat. Dolorem voluptatum doloribus hic vero neque fugit unde culpa impedit reprehenderit ab rerum corrupti consequuntur iusto sed totam velit voluptates eius, animi aut. Quisquam, iusto nulla, nisi dolorum maiores doloremque maxime quos ullam
      accusantium consequatur molestias, adipisci itaque iure molestiae vero aliquid velit dolore esse? Cum nihil quidem eligendi obcaecati itaque, sapiente ullam cumque excepturi fuga numquam voluptate repudiandae laboriosam corrupti quisquam accusantium
      nisi adipisci nemo?</div>
  </section>
</div>

This is what you are trying to achieve? I have used flexbox. (see snippet result in full page)

.container>section {
  height: 500px;
  display: flex;
}

.container>section>div:nth-child(1) {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container>section>div:nth-child(2) {
  width: 60%;
}

.container .section-1 {
  background-color: skyblue;
}

.container .section-2 {
  background-color: pink;
}

.container .section-3 {
  background-color: yellow;
}
<div class="container">
  <section class="section-1">
    <div>heading</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui veritatis neque iure animi quae placeat labore eligendi a, rem architecto delectus dicta hic aspernatur vitae perferendis sed blanditiis maiores iusto porro natus ipsa similique tenetur?
      Doloremque saepe eius natus repellat ullam! Porro quibusdam omnis assumenda facere facilis tempore expedita, nisi pariatur, non temporibus soluta ab veritatis eius sunt quaerat adipisci laudantium eligendi mollitia quis earum perspiciatis delectus
      explicabo magnam! Culpa ducimus voluptatem suscipit aliquid? Nisi, minus incidunt! Atque corporis voluptate ipsum, vero mollitia molestias sed totam expedita quia dolor neque nobis alias cum impedit ut necessitatibus beatae reiciendis maxime! Excepturi!</div>
  </section>
  <section class="section-2">
    <div>heading</div>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium voluptatibus quis aperiam qui nulla quaerat voluptatem voluptas consectetur, consequatur est accusamus inventore. Recusandae, dolorum accusamus. Omnis assumenda labore, repellendus
      impedit rerum ratione architecto alias sequi vero at consequuntur voluptatem similique blanditiis exercitationem. Ipsa reiciendis, est, dolore harum at architecto error aliquid ullam dolorum magnam nobis nam. Ab cum consectetur quibusdam minus eum
      alias commodi suscipit autem. Dolore velit beatae saepe nesciunt harum accusantium natus qui fugiat, accusamus, commodi maxime nostrum explicabo fuga omnis temporibus obcaecati modi sequi perferendis! Illo, optio ab. Explicabo distinctio consequuntur
      molestiae veniam, ducimus sit exercitationem id.</div>
  </section>
  <section class="section-3">
    <div>heading</div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum recusandae laboriosam sed molestiae illo, earum, ad vero dolor deserunt reprehenderit dicta temporibus suscipit itaque vel alias similique voluptas nam iusto velit excepturi distinctio
      placeat. Dolorem voluptatum doloribus hic vero neque fugit unde culpa impedit reprehenderit ab rerum corrupti consequuntur iusto sed totam velit voluptates eius, animi aut. Quisquam, iusto nulla, nisi dolorum maiores doloremque maxime quos ullam
      accusantium consequatur molestias, adipisci itaque iure molestiae vero aliquid velit dolore esse? Cum nihil quidem eligendi obcaecati itaque, sapiente ullam cumque excepturi fuga numquam voluptate repudiandae laboriosam corrupti quisquam accusantium
      nisi adipisci nemo?</div>
  </section>
</div>

With grid

.container>section {
  height: 500px;
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.container>section>div:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .section-1 {
  background-color: skyblue;
}

.container .section-2 {
  background-color: pink;
}

.container .section-3 {
  background-color: yellow;
}
<div class="container">
  <section class="section-1">
    <div>heading</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui veritatis neque iure animi quae placeat labore eligendi a, rem architecto delectus dicta hic aspernatur vitae perferendis sed blanditiis maiores iusto porro natus ipsa similique tenetur?
      Doloremque saepe eius natus repellat ullam! Porro quibusdam omnis assumenda facere facilis tempore expedita, nisi pariatur, non temporibus soluta ab veritatis eius sunt quaerat adipisci laudantium eligendi mollitia quis earum perspiciatis delectus
      explicabo magnam! Culpa ducimus voluptatem suscipit aliquid? Nisi, minus incidunt! Atque corporis voluptate ipsum, vero mollitia molestias sed totam expedita quia dolor neque nobis alias cum impedit ut necessitatibus beatae reiciendis maxime! Excepturi!</div>
  </section>
  <section class="section-2">
    <div>heading</div>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium voluptatibus quis aperiam qui nulla quaerat voluptatem voluptas consectetur, consequatur est accusamus inventore. Recusandae, dolorum accusamus. Omnis assumenda labore, repellendus
      impedit rerum ratione architecto alias sequi vero at consequuntur voluptatem similique blanditiis exercitationem. Ipsa reiciendis, est, dolore harum at architecto error aliquid ullam dolorum magnam nobis nam. Ab cum consectetur quibusdam minus eum
      alias commodi suscipit autem. Dolore velit beatae saepe nesciunt harum accusantium natus qui fugiat, accusamus, commodi maxime nostrum explicabo fuga omnis temporibus obcaecati modi sequi perferendis! Illo, optio ab. Explicabo distinctio consequuntur
      molestiae veniam, ducimus sit exercitationem id.</div>
  </section>
  <section class="section-3">
    <div>heading</div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum recusandae laboriosam sed molestiae illo, earum, ad vero dolor deserunt reprehenderit dicta temporibus suscipit itaque vel alias similique voluptas nam iusto velit excepturi distinctio
      placeat. Dolorem voluptatum doloribus hic vero neque fugit unde culpa impedit reprehenderit ab rerum corrupti consequuntur iusto sed totam velit voluptates eius, animi aut. Quisquam, iusto nulla, nisi dolorum maiores doloremque maxime quos ullam
      accusantium consequatur molestias, adipisci itaque iure molestiae vero aliquid velit dolore esse? Cum nihil quidem eligendi obcaecati itaque, sapiente ullam cumque excepturi fuga numquam voluptate repudiandae laboriosam corrupti quisquam accusantium
      nisi adipisci nemo?</div>
  </section>
</div>

回复 原文
~没有更多了~

关于作者

‖放下

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文