無法在div中向右移動文本

我嘗試了很多事情，例如float: right;但效果不佳。我還嘗試在 youtube 上觀看有關它的視頻，但找不到任何內容。如何將生物學、英語、物理學移到右側？

這是代碼：

courses {
  display: flex;
  margin-top: 100px;
}

.plates {
  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;
}

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

uj5u.com熱心網友回復：

我不確定哪個元素有courses類。

但是，您的問題可以使用display: grid. 請參閱帶有注釋的行/* CHANGE */。

第一個元素需要全寬，因此使用grid-column屬性。對于其余元素，它們需要每行有兩個元素，因此使用grid-template-columns.

.plates {
  display: grid;        /* CHANGE */
  grid-template-columns: 50% 50%;  /* CHANGE */
  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; /* OR grid-column-start: 1, grid-column-end: -1 */   /* CHANGE */
}

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

uj5u.com熱心網友回復：

您可以將這些元素包裝在一個單獨的 div 中（否則標題也會受到影響）并應用于column-count: 2：

courses {
  display: flex;
  margin-top: 100px;
}

.plates {
  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);
}
.columnwrapper {
  column-count: 2;
}
.course_icon {
  width: 36px;
  height: 36px;
}

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

.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="plates">
  <div class="full_course">
    <h2>Full Course</h2>
  </div>
  <div class="columnwrapper">
    <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>

uj5u.com熱心網友回復：

   .courses {
    width: 100%;
    display: flex;
}

.plates {
  border-radius: 20px;
  width: 512px;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 10px 0px;
}

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

.plates h2 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
}

.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="plates">
    <h2>Full Course</h2>
 <div class="courses">
      <div class="course-l">
          <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>
<div class="course-r">
      <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>
</div>

標籤：html css

上一篇：在Alert組件中使用Skeleton的問題

下一篇：如何修復引導程式中的行、列布局