我在這裡遇到了一個問題，我試圖將一個盒子放在網站的右側，但不知道為什麼它不起作用，我嘗試使用justify-content:flex-end;將盒子對齊到頁面的“末尾”，然後添加padding-right為200px，但可惜這並不起作用。對於解釋方面的任何幫助將不勝感激。 *{margin:0;padding:0;box-sizing:border-box;}.container{width:100

將網站的盒子定位在右側的方法

我在這裡遇到了一個問題，我試圖將一個盒子放在網站的右側，但不知道為什麼它不起作用，我嘗試使用<code>justify-content: flex-end;< /code>將盒子對齊到頁面的“末尾”，然後添加<code>padding-right</code>為<code>200px</code>，但可惜這並不起作用。對於解釋方面的任何幫助將不勝感激。 >

* {
    保證金：0；
    填充：0；
    框大小：邊框框；
  }
  。容器 {
    寬度：100%；
    高度：50vh；
    背景顏色：#1f2937；
    位置：靜態；
    顯示：柔性；
    彎曲方向：列；
    調整內容：居中；
  }

 
  
  .頁尾 {
    位置：絕對；
    底部：0px；
    寬度：100%；
    高度：10vh；
    背景顏色：#1f2937；
    白顏色;
    文字對齊：居中；
    顯示：柔性；
    調整內容：居中；
    對齊項目：居中；
  }
  
  。標識 {
    字體大小：24px；
    字型系列：'Times New Roman'、Times、serif；
    白顏色;
    justify-content：空間之間；
    頂部內邊距：15px；
    字體系列：'Gill Sans'、'Gill Sans MT'、Calibri、'Trebuchet MS'、sans-serif；
    左內邊距：200px；
    位置：絕對；
    頂部：0；
  }
  
  .導覽列{
    白顏色;
    字體大小：18px；
    位置：固定；
    寬度：85%；
    頂部：0；
    右：0；
    保證金：自動；
    顯示：柔性；
    對齊項目：居中；
    調整內容：彈性結束；
    彎曲方向：行；
    頂部內邊距：15px；
    右內邊距：200px；
  }
  
  .navbar ul li {
    列表樣式：無；
    顯示：內聯塊；
    邊距：0 20px；
    文字裝飾：無；
  }
  
  。文本1 {
    位置：相對；
    白顏色;
    左內邊距：200px；
    字體大小：48px；
    字體粗細：粗體；
    寬度：720px；
  }
  .text2{
    白顏色;
    字體大小：18px；
    左內邊距：200px；
    寬度：520px；
  }


  .text3{
    文字對齊：居中；
    顯示：柔性；
    對齊項目：居中； /*垂直居中*/
    調整內容：正確； /*水平居中*/
    寬度：500px；
    高度：350px；
    背景顏色：灰色；
  }
 </前>
;
<html lang="zh-cn">

<頭>
  <元字元集=“UTF-8”>
  <元名稱=“視口”內容=“寬度=設備寬度，初始比例= 1.0”>
  <標題>網站
  
</頭>

<正文>
  
    
      標題標誌
    ;
    <div class="navbar">
      <ul>
        <li><a href="index.html">header link one</a></li>
        <li><a href="index.html">header link two</a></li>
        <li><a href="index.html">header link three</a></li>
      </ul>
    </div>
    <div class="text1">
      <h2>This website is awesome</h2>
    </div>
    <div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast</div>
    <div class="text3">this is a placeholder for an image</div>
  </div>
  <div class="footer">
    Copyright © The Odin Project 2023
  </div>

</body>

</html></pre>
<p><br /></p>
<p>我嘗試使用justify-content:flex-end來對齊它，但是我已經束手無策了，說實話，對於我的問題的解釋將非常有幫助，我只包含了必要的CSS代碼和整個HTML文件。先感謝大家的幫忙！ </p>
P粉953231781457 天前641

全部回覆(1)我來回復

P粉3739908572023-08-15 18:21:28

首先，你使用了flex屬性，儘管你還沒有設定display:flex;

其次，要讓一個div向右移動（例如box）：（根據需要進行縮排）

.container{
display:flex;
align-items:center; /*垂直居中*/
justify-content:right; /*水平居中*/
}```
#text{
display:block;
}

回覆

取消回覆