如何将 HTML 页面垂直分成 4 个部分

Question

我希望将我的HTML页面分成4个不同的垂直部分。

我希望每个部分都有不同的背景颜色，因此我使用了div，但是每个背景颜色未覆盖每个部分的侧面。

** 我的期望结果： 我不想在HTML中看到身体背景颜色的红色。

body {
  background-color: red;
}

.intro {
  background-color: #674AB3;
}

.edu {
  background-color: #A348A6;
}

.Skills {
  background-color: #9F63C4;
}

.end {
  background-color: #9075D8;
}

<div class="intro">

  <hr>
</div>
<div class="edu">

  <hr>
</div>
<div class="Skills">

  <hr>
</div>
<div class="end">

  <hr>
</div>

- Ron Goldstein

---

你能否更清楚地表达你的问题？比如说，你所说的“dividing”是指什么？ - Ritankar Bhattacharjee

我希望我的页面由4个不同的部分组成。 - Ron Goldstein

Answer 1

1. 为body设置margin: 0，它有一个默认的margin。
2. 将<hr>的margin设为0。
3. 将每个div的高度设置为25vh（垂直高度）。

body {
  background-color: red;
  margin: 0;
}

.intro {
  background-color: #674AB3;
  height: 25vh;
}

.edu {
  background-color: #A348A6;
  height: 25vh;
}

.Skills {
  background-color: #9F63C4;
  height: 25vh;
}

.end {
  background-color: #9075D8;
  height: 25vh;
}

hr {
  margin: 0;
}

<div class="intro">
  <hr/>
</div>
<div class="edu">
  <hr/>
</div>
<div class="Skills">
  <hr/>
</div>
<div class="end">
  <hr/>
</div>

- Omri Attiya

---

它可以工作，但我也希望它在每个部分的底部工作。 - Ron Goldstein

@RonGoldstein 添加了带有0边距的hr。 - Omri Attiya

Answer 2

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-container>div {

margin:30px;
}
.flex-container hr {
   
    width: 100px;
    height: 100px;
    padding: 5px;
    margin: 10px;
    border-color: #FFF;
    box-shadow: none;
    border-width: 5px;
}

.intro {
  background-color: #674AB3;
}

.edu {
  background-color: #A348A6;
}

.Skills {
  background-color: #9F63C4;
}

.end {
  background-color: #9075D8;
}

<div class="flex-container">
  <div class="intro"><hr></div>
  <div class="edu"><hr></div>
  <div class="Skills"><hr></div>
  <div class="end"><hr></div>
</div>

- Dipesh

---

如果您想删除hr标签，请添加以下CSS：.flex-container>div { width: 100px; height: 100px; margin:30px; }它的效果非常棒 :-) - Dipesh

Answer 3

你可以尝试使用网格布局！还可以使其响应式:D

这是为了让4个部分并排放置，如果要使它们在垂直方向上堆叠，请更改：

grid-template-columns: repeat(4, 1fr);

to:

grid-template-rows: repeat(4, 1fr);

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

body {
  background-color: #00000000; /* transparent color */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 vertical sections */
  height: 100vh;
  margin: auto;
}

.intro {
  background-color: #674AB3;
}

.edu {
  background-color: #A348A6;
}

.Skills {
  background-color: #9F63C4;
}

.end {
  background-color: #9075D8;
}

<div class="intro">
    <p>intro</p>
</div>
<div class="edu">
    <p>edu</p>
</div>
<div class="Skills">
    <p>Skills</p>
</div>
<div class="end">
    <p>end</p>
</div>

- Hal

Answer 4

你可以简单地在父容器（flex-container）上使用 display: flex。

就像这样：

<div style="display: flex;">
  <div class="intro"><hr></div>
  <div class="edu"><hr></div>
  <div class="Skills"><hr></div>
  <div class="end"><hr></div>
</div>

- Nitin Garg

Answer 5

    <div class="intro">
    
    </div>
    <div class="edu">
    
    </div>
    <div class="Skills">

    </div>
    <div class="end">

    </div>
</div>

body {
  background-color: red;
}
.main{
    display: flex;
    grid-template-columns: repeat(4,1fr);
    width:100vw;
}
.intro {
  background-color: #674AB3;
  width: 25%;
  height: 75vh;
}

.edu {
  background-color: #A348A6;
  width: 25%;
      height: 75vh;
}

.Skills {
  background-color: #9F63C4;
  width: 25%;
      height: 75vh;
}

.end {
  background-color: #9075D8;
  width: 25%;
      height: vh;
}

grid

- Elias kibret

Answer 6

<div class="main">

    <div class="intro">
    
    </div>
    <div class="edu">
    
    </div>
    <div class="Skills">

    </div>
    <div class="end">

    </div>

.main{
    display: flex;
    grid-template-columns: repeat(4,1fr);
    width:100vw;
}
.intro {
  background-color: #674AB3;
  width: 25%;
  height: 75vh;
}

.edu {
  background-color: #A348A6;
  width: 25%;
  height: 75vh;
}

.Skills {
  background-color: #9F63C4;
  width: 25%;
  height: 75vh;
}

.end {
  background-color: #9075D8;
  width: 25%;
  height:75vh;
}

- Elias kibret

Answer 7

像这样的东西？

body {
  background-color: red;
}

.intro {
  height:200px;
  background-color: #674AB3 !important;
}

.edu {
  height:200px;
  background-color: #A348A6 !important;;
}

.Skills {
  height:200px;
  background-color: #9F63C4 !important;;
}

.end {
  height:200px;
  background-color: #9075D8 !important;;
}

<div class="intro">

  <hr>
</div>
<div class="edu">

  <hr>
</div>
<div class="Skills">

  <hr>
</div>
<div class="end">

  <hr>
</div>

- D A

Answer 8

你也可以尝试这种方法。

body {background-color:transparent;}

.intro {
  background-color: #674AB3;
  height:100vh;
  width:100%;
}

.edu {
  background-color: #A348A6;
  height:100vh;
  width:100%;
}

.Skills {
  background-color: #9F63C4;
  height:100vh;
  width:100%;
}

.end {
  background-color: #9075D8;
  height:100vh;
  width:100%;
}

.wrapper {
  display:grid;
  height:100vh;
  width:100%;
  }

<div class="wrapper">
<div class="intro">
Hello
</div>

<div class="edu">
Hello
</div>
<div class="Skills">
Hello
</div>
<div class="end">
Hello
</div>

</div>

- Crystal