Question

我运行a blog，当我遇到侧栏时出现问题时，我正在制作新的布局。

我已经尝试了所有内容，只要将侧边栏移到内容之上，改变位置等，但无济于事。

body #sidebar {
    width: 25%;
    margin-top: 15px;
    padding-right: 20px;
    padding-top: 20px;
    padding-left: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    float: left;
    clear: both;
    position: relative;    
}

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

我觉得它必须是小事。我错过了什么？

Answer 1

编辑：您的代码无效的原因是 p tag是块级元素。因此它占据了屏幕的整个宽度。（这里红色是#main，黑色是#sidebar）

#sidebar 也来自 #main 。由于这两个原因，您的 float：left 没有按照您期望的方式运行。这就是为什么你有两种解决问题的方法。您可以在 #main 之前写 #sidebar ，也可以在 #main 中指定 display：inline-block 。< / p>

添加display：inline-block会导致元素仅占用所需的空间量。

这是代码

  body #sidebar {
    width: 25%;
    margin-top: 15px;
    padding-right: 20px;
    padding-top: 20px;
    padding-left: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    float: left;
    clear: both;
    position: relative;
}

#main{
  display: inline-block;
}

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

Answer 2

您的侧边栏应该是第一个，然后是您的div，或使用此代码段：

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

#sidebar {
    overflow:hidden;
}

Answer 3

试用此代码。 HTML

<body>
<div class="Section">
<div id="sidebar"> 
    <p>Some text</p>
</div>
<div id="main">
    <p>Some text</p>
</div>


</div>

</body>

CSS

#Section{

  width:100%;

}
#main{

  width:75%;
  float:right;
}

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

Answer 4

这是快速解决方案，但我不确定为什么你要经历重新发明轮子的大页面。

您是否知道https://getbootstrap.com和https://startbootstrap.com/，我认为此页面https://blackrockdigital.github.io/startbootstrap-portfolio-item/已经找到了您想要的内容。查找他们的许可证并使用它。

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

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>

Answer 5

您应该考虑将div嵌套在“包装器”中。它有利于保持一致性，并将所有div保持在他们应该去的地方。使用显示内联块并重新排序你的div将做你需要的，但真正有一个清晰的html和CSS结构将在以后节省你的头痛。

我做了一个简单的例子，说明我认为你想要根据你的链接实现的目标。 https://codepen.io/morganfens/pen/gxaQVJ

HTML

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

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

</div>

CSS

#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;
}

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

5 个答案: