html - 为什么我的部分没有正确地靠右？-6ren

html - 为什么我的部分没有正确地靠右？

转载作者：太空宇宙更新时间：2023-11-04 10:05:26

我目前正在制作一个网页，其中有一个侧面部分，例如这张照片中的那个:

我目前拥有的是:

为什么我的侧栏没有像第一张图片中那样显示？我试图制作侧栏并通过放置“侧栏????”来测试它的位置，但是它没有正确显示。我的代码如下:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>int222_162d16 - Assignment 2 - Home Page</title>
    <link rel="stylesheet" href="css/normalize.css"   type="text/css" media="screen" /> 
    <link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" /> 
  </head>
  <body>
    <nav class="fixed-nav-bar">
      <ul class="nav">
        <li class="nav"><a href="../index.html">&spades; My Zenit Account</a></li>
        <li class="nav"><a class="active" href="index.html">Home</a></li>
        <li class="nav"><a href="gallery.html">Gallery</a></li>
        <li class="nav"><a href="video.html">Video</a></li>
        <li class="nav"><a href="audio.html">Audio</a></li>
        <li class="nav"><a href="table.html">Tables With CSS</a></li>
        <li class="nav"><a href="pizza/index.html">Forms</a></li>
        <li class="nav"><a href="css/sitecss.css">CSS Used</a></li>
        <li class="nav"><a href="extra/index.html">Extra</a></li>
      </ul>
    </nav>
    <h1>Welcome To The Home Page!</h1>



    <div class="s">
        <section class="s">
            <h3>HTML5 & CSS Normalize</h3>
            <p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
            <aside><p>SIDE COLUMN???</p></aside>
        </section>

        <aside><p>SIDE COLUMN???</p></aside>

        <section class="s">
            <h3>TEXT</h3>
            <p>
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            </p>
        </section>
    </div>

    <hr />
    <footer>
       <script>
          var dt=new Date(document.lastModified);   // Get document last modified date
          document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
       </script>
    </footer>
  </body>
</html>

CSS:

/*nav.fixed-nav-bar
{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  margin-top: 10px;
}
*/
ul.nav
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
    border: 1px solid #e7e7e7;
    box-shadow: 5px 2px 10px #808080;
}

li.nav 
{
    float: left;
}

li a 
{

    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color on hover*/

li a:hover:not(.active) 
{
    background-color: #ddd;
}

li a.active
{
    color: #ffffff;
    background-color: #9999ff;
}

section.s /*shadow on sections*/
{
    background-color: #ccccff;
    box-shadow: 5px 2px 10px #808080;
    width:63%;


}

/*div.s
{
    box-shadow: 5px 2px 10px #808080;


}
*/
footer  
{

          width:100%;
          background:#ccccff;
          color:#000000;
          border:1px solid #cccccc;
          position:absolute;
          text-align:center; 
          font-weight:bold;
          display:inline-block;
          margin: 0px auto;
          line-height:20px;
          box-shadow: 5px 2px 10px #808080;
          clear: both;
   }
   aside {
  float: right;
  width: 30%;
}

最佳答案

我会说，您需要将 HTML 更改为

<div class="s">
    <aside>
        <section class="s">
        <p>SIDE COLUMN???</p>
        </section>
    </aside>

    <section class="s">
        <h3>HTML5 & CSS Normalize</h3>
        <p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
    </section>


    <section class="s">
        <h3>TEXT</h3>
        <p>
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
        </p>
    </section>
</div>

看，我搬了<aside>超出部分，使其向右浮动

关于html - 为什么我的部分没有正确地靠右？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38042636/

文章推荐： linux - 如何判断附加到 Azure 虚拟机的磁盘是否已加密？

文章推荐： java - 未定义(海龟)类型

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 为什么我的部分没有正确地靠右？