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

Question

我开了一个博客，当我在侧边栏遇到问题时，正在为其重新设计布局。

我已经尝试了所有内容，包括将侧栏移动到内容上方，更改位置等，但无济于事。

 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标签是一个块级元素。 因此，它占据了屏幕的整个宽度。 （这里红色是#main，黑色是#sidebar）

#sidebar也在#main之后 。 由于这两个原因，您的float：left无法按预期的方式工作。 这就是为什么您有两种解决问题的方法。 #main之前，你要么写#sidebar或您指定显示：在您的#main inline-block的 。

添加显示：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保持原状。 使用display inline block和对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 个解决方案

解决方案1
1 已采纳 2017-07-28 16:10:13

解决方案2
0 2017-07-28 16:11:02

解决方案3
0 2017-07-28 16:17:05

解决方案4
0 2017-07-28 16:22:29

解决方案5
0 2017-07-28 16:38:29

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

问题描述

5 个解决方案

解决方案1 1 已采纳 2017-07-28 16:10:13

解决方案2 0 2017-07-28 16:11:02

解决方案3 0 2017-07-28 16:17:05

解决方案4 0 2017-07-28 16:22:29

解决方案5 0 2017-07-28 16:38:29

解决方案1
1 已采纳 2017-07-28 16:10:13

解决方案2
0 2017-07-28 16:11:02

解决方案3
0 2017-07-28 16:17:05

解决方案4
0 2017-07-28 16:22:29

解决方案5
0 2017-07-28 16:38:29