最近我遇到了一個小問題，我無法將文本移動到 div 內的第二列。一段時間后有人幫助了我，我想我可以復制并粘貼那個 div，它會自動移動到它附近，不幸的是它移動到它下面，而且我添加了它，margin-top所以它不會在標題上。有人能幫我嗎？

這就是它的樣子

這是它的樣子

這是代碼：

plates {
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.courses{
  margin-top:280px;
}
.course_icon {
  width: 36px;
  height: 36px;
}

.full_course {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1; 
}

.MathPhys{
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1; 
 
}
.course {
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  margin: 0rem 0rem;
  display: flex;
  align-items: center;
  padding: 2px 40px;
}

.course h3 {
  padding: 0rem 1rem;
}

<div class="container">
    <div class="courses">
        <div class="plates">
           <div class="full_course">
               <h2>Full Course</h2>
           </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/his.png" alt="hi">
                    <h3>History</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
                    <h3>Chemistry</h3>
                </div>
                 <div class="course">
                    <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
                    <h3>Biology</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/en.png" alt="en">
                    <h3>English</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
                
                
                
        </div>
        <div class="courses">
            <div class="plates">
               <div class="MathPhys">
                   <h2>Math   Physics</h2>
               </div>
                    <div class="course">
                        <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                        <h3>Mathematics</h3>
                    </div>
                    <div class="course">
                        <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                        <h3>Physics</h3>
                    </div>
                    
                    
                    
            </div>
    </div>

  


</div>

uj5u.com熱心網友回復：

你可以使用grid的.container為好。

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  min-width: 1024px;
}

.plates {
  display: grid;
  grid-template-columns: 50% 50%;
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.courses {
  margin-top: 280px;
}

.course_icon {
  width: 36px;
  height: 36px;
}

.full_course {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.MathPhys {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.course {
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  margin: 0rem 0rem;
  display: flex;
  align-items: center;
  padding: 2px 40px;
}

.course h3 {
  padding: 0rem 1rem;
}

<div class="container">
  <div class="courses">
    <div class="plates">
      <div class="full_course">
        <h2>Full Course</h2>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
        <h3>Mathematics</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/his.png" alt="hi">
        <h3>History</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
        <h3>Chemistry</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
        <h3>Biology</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/en.png" alt="en">
        <h3>English</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
        <h3>Physics</h3>
      </div>
    </div>
  </div>
  <div class="courses">
    <div class="plates">
      <div class="MathPhys">
        <h2>Math   Physics</h2>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
        <h3>Mathematics</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
        <h3>Physics</h3>
      </div>
    </div>
  </div>
</div>

你也錯過了一個結束 </div>

uj5u.com熱心網友回復：

你忘記了類選擇器的一個點

plates { -> .plates {

并把這個css放在最后：

這將為兩列創建一個網格（的寬度相等）

和 1rem 的差距

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

那么你有一些缺少的結束 div :)

最后的風險

.plates {
    display: grid;
    grid-template-columns: 50% 50%;
    border-radius: 20px;
    width: 512px;
    height: 300px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.course_icon {
    width: 36px;
    height: 36px;
}

.full_course {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    text-align: center;
    grid-column: 1 / -1;
}

.MathPhys {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    text-align: center;
    grid-column: 1 / -1;
}

.course {
    font-family: 'Noto Sans', sans-serif;
    font-weight: normal;
    margin: 0rem 0rem;
    display: flex;
    align-items: center;
    padding: 2px 40px;
}

.course h3 {
    padding: 0rem 1rem;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

<!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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="courses">
            <div class="plates">
                <div class="full_course">
                    <h2>Full Course</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/his.png" alt="hi">
                    <h3>History</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
                    <h3>Chemistry</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
                    <h3>Biology</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/en.png" alt="en">
                    <h3>English</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
        <div class="courses">
            <div class="plates">
                <div class="MathPhys">
                    <h2>Math   Physics</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

uj5u.com熱心網友回復：

在這里，我對您的 css 代碼進行了簡單的更改。

.container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap:3rem;
    }

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:3rem;
}

.plates {
  display: grid;
  grid-template-columns: 50% 50%;
  border-radius: 20px;
  width: 450px;
  height: 290px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.courses {
  margin-top: 100px;
}

.course_icon {
  width: 36px;
  height: 36px;
}

.full_course {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.MathPhys {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.course {
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  margin: 0rem 0rem;
  display: flex;
  align-items: center;
  padding: 2px 40px;
}

.course h3 {
  padding: 0rem 1rem;
}

<!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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="courses">
            <div class="plates">
                <div class="full_course">
                    <h2>Full Course</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/his.png" alt="hi">
                    <h3>History</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
                    <h3>Chemistry</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
                    <h3>Biology</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/en.png" alt="en">
                    <h3>English</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
        <div class="courses">
            <div class="plates">
                <div class="MathPhys">
                    <h2>Math   Physics</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/388451.html

標籤：html css

上一篇：為什么我的自定義元素的偽元素顯示在兄弟元素之后？

下一篇：直接鏈接到CSS選項卡

第二個div在第一個div下

你忘記了類選擇器的一個點

并把這個css放在最后：

那么你有一些缺少的結束 div :)

最后的風險