将网站的盒子定位在右侧的方法
P粉953231781
P粉953231781 2023-08-14 19:16:04
[CSS3讨论组]
<p>我在这里遇到了一个问题,我试图将一个盒子放在网站的右侧,但不知道为什么它不起作用,我尝试使用<code>justify-content: flex-end;</code>将盒子对齐到页面的“末尾”,然后添加<code>padding-right</code>为<code>200px</code>,但可惜这并不起作用。对于解释方面的任何帮助将不胜感激。</p> <p><br /></p> <pre class="brush:css;toolbar:false;">* { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100%; height: 50vh; background-color: #1f2937; position: static; display: flex; flex-direction: column; justify-content: center; } .footer { position: absolute; bottom: 0px; width: 100%; height: 10vh; background-color: #1f2937; color: white; text-align: center; display: flex; justify-content: center; align-items: center; } .logo { font-size: 24px; font-family: 'Times New Roman', Times, serif; color: white; justify-content: space-between; padding-top: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; padding-left: 200px; position: absolute; top: 0; } .navbar { color:white; font-size: 18px; position: fixed; width: 85%; top: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: flex-end; flex-direction: row; padding-top: 15px; padding-right: 200px; } .navbar ul li { list-style: none; display: inline-block; margin: 0 20px; text-decoration: none; } .text1 { position: relative; color: white; padding-left: 200px; font-size: 48px; font-weight: bold; width: 720px; } .text2{ color: white; font-size: 18px; padding-left: 200px; width: 520px; } .text3{ text-align: center; display:flex; align-items:center; /*vertical center*/ justify-content:right; /*horizontal center*/ width: 500px; height:350px; background-color: grey; } </pre> <pre class="brush:html;toolbar:false;">&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Website&lt;/title&gt; &lt;link href="style.css" rel="stylesheet"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="logo"&gt; &lt;h2&gt;Header Logo&lt;/h2&gt; &lt;/div&gt; &lt;div class="navbar"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="index.html"&gt;header link one&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;header link two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;header link three&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="text1"&gt; &lt;h2&gt;This website is awesome&lt;/h2&gt; &lt;/div&gt; &lt;div class="text2"&gt;This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast&lt;/div&gt; &lt;div class="text3"&gt;this is a placeholder for an image&lt;/div&gt; &lt;/div&gt; &lt;div class="footer"&gt; Copyright &copy; The Odin Project 2023 &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><br /></p> <p>我尝试使用justify-content:flex-end来对齐它,但是我已经束手无策了,说实话,对于我的问题的解释将非常有帮助,我只包含了必要的CSS代码和整个HTML文件。提前感谢大家的帮助!</p>
P粉953231781
P粉953231781

全部回复(1)
P粉373990857

首先,你使用了flex属性,尽管你还没有设置display:flex;

其次,要使一个div向右移动(例如box):(根据需要进行缩进)

.container{
display:flex;
align-items:center; /*垂直居中*/
justify-content:right; /*水平居中*/
}```
#text{
display:block;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号