简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
將網站的盒子定位在右側的方法
P粉953231781
P粉953231781 2023-08-14 19:16:04
0
1
636
<p>我在這裡遇到了一個問題，我試圖將一個盒子放在網站的右側，但不知道為什麼它不起作用，我嘗試使用<code>justify-content: flex-end;< /code>將盒子對齊到頁面的“末尾”，然後添加<code>padding-right</code>為<code>200px</code>，但可惜這並不起作用。對於解釋方面的任何幫助將不勝感激。</p> <p><br />></p> 
* {
    保證金：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粉953231781
                    

                        P粉953231781
                        

                    

                

                

                    

                    

                        

                            
                        

                    

                

            

            

                

                    
全部回覆(1)

                    
                    
                

                


                                

                    P粉373990857
                    

                        

                            

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

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


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


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

                            

                                 
                                點贊 +0
                                

                                    新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！