Html 尽管有CSS，但侧边栏未正确定位

我跑步时正在为它做一个新的布局，这时我在侧边栏上遇到了一些问题

我尝试了所有的方法，比如在内容上方移动侧边栏，改变位置等等，但都没有用

身体侧边栏{ 宽度：25%； 边缘顶部：15px； 右边填充：20px； 填充顶部：20px； 左侧填充：30px； 垫底：20px； 边缘底部：20px； 左边距：15px； 浮动：左； 明确：两者皆有； 位置：相对位置； } 一些文本

一些文本

编辑：代码不起作用的原因是 标记是块级元素。因此，它占据了整个屏幕的宽度。这里红色是主要的，黑色是侧边栏

侧边栏也出现在主菜单之后。由于这两个原因，您的float:left没有按您期望的方式工作。 这就是为什么你有两种解决问题的方法。您可以在main之前编写侧栏，或者在main中指定display:inline块

添加display:inline块会导致元素只占用所需的空间量

这是密码

身体侧边栏{ 宽度：25%； 边缘顶部：15px； 右边填充：20px； 填充顶部：20px； 左侧填充：30px； 垫底：20px； 边缘底部：20px； 左边距：15px； 浮动：左； 明确：两者皆有； 位置：相对位置； } 主要{ 显示：内联块； } 主要

一些文本

---

侧边栏应该是第一个，然后是div，或者使用以下代码段：

#main {
    width:75%;
    float: right;
}

#sidebar {
    overflow:hidden;
}

试试这个代码。 HTML

---

这是一个快速解决办法，但我不知道你为什么要翻阅这本关于重新发明轮子的巨著

你知道吗？我想这页已经有你想要的了。查阅他们的执照并使用它

顺便说一下，我从你的页面源代码中获取了下面的代码

body #sidebar {
    background-color: #fff;
    /*padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 15px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 20px;*/

    border: 1px solid #975FB4;
    width:25%;
    float:left;

    }


body #main {
    /*margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;*/
    padding:10px;
    height: auto;
      width: 75%;
}

<div id = "sidebar"> 
<p>Some text</p>
</div>

<div id = "main">
<p>Some text</p>
</div>

---

<>你应该考虑在包装中嵌套你的div。这有助于保持一致性，让你所有的div都保持在他们应该去的地方。使用displayinlineblock和对div进行重新排序可以满足您的需要，但是真正为html和css提供清晰的结构将为您将来节省大量的麻烦

我做了一个快速的例子，我认为这是什么更是你试图实现基于您的链接

HTML

---

改变顺序，首先是侧边栏，然后是主分区。我这样做了，它解决了问题。我必须保持在内容下方的边栏上，以便在移动平台上以这种方式显示。谢谢你的帮助！很乐意帮忙

#Section{

  width:100%;

}
#main{

  width:75%;
  float:right;
}

#sidebar {
    width: 25%;
    float: left;
    clear: both;
    position: relative;    
}

body #sidebar {
    background-color: #fff;
    /*padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 15px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 20px;*/

    border: 1px solid #975FB4;
    width:25%;
    float:left;

    }


body #main {
    /*margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;*/
    padding:10px;
    height: auto;
      width: 75%;
}

<div id = "sidebar"> 
<p>Some text</p>
</div>

<div id = "main">
<p>Some text</p>
</div>

<div id="sidebar"> 
    <p>I'm a sidebar</p>
</div>

<div id="main">
    <p>Main Content Goes Here</p>
</div>

</div>

#sidebar {
    width: 25%;
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom: 15px;
    display:inline-block;
    text-align: left;
}

#main{
  display:inline-block;
  padding-top:15px;
  padding-bottom:15px;
  width:70%;
  text-align: left;
}