如何將HTML頁面垂直分成4個部分

我想將我的 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>

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

1. 為 body設定margin: 0，它有一個默認的邊距。
2. 將<hr>的邊距設定為 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>

uj5u.com熱心網友回復：

像這樣的東西？

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>

uj5u.com熱心網友回復：

使用具有背景顏色和 div 標簽高度的 div 標簽類。

uj5u.com熱心網友回復：

您也可以嘗試這種方法。

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>

uj5u.com熱心網友回復：

您可以簡單地使用 display: flex 到父容器，即 flex-container

像

<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>

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

您可以嘗試使用網格！不妨讓它回應：D

這是讓 4 個部分并排放置，使它們在垂直方向堆疊，更改：

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

到：

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>

標籤：html css

上一篇：如何對齊(input[type="checkbox"] Label)在頁面上水平居中？[復制]

下一篇：取消隱藏按鈕clic上的h1標簽