Question

在我的网页上，右侧栏位于主要内容的底部。并且未与主要内容部分正确对齐。右侧栏的CSS代码是：

#sidebar{
 background: #ddd;
 float: right;
 }

有一个名为sidebar-wrap的<div>部分，它是侧边栏的容器，具有以下代码：

#sidebar-wrap {
float: right; 
width: 200px; 
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding-left:20px;
padding-right:20px;
}

Answer 1

您有右侧边距，将文本推向左侧。如果您不想要它，请删除它。例如。

#sidebar-wrap {
  float: right;
  width: 200px;
  padding: 20px;
  margin: 20px 0;
  background: rgb(221, 221, 221);
}

更新：我已将背景颜色移至＃sidebar-wrap并替换了填充，以获得更好的效果。

此外，要使侧边栏位于主要内容旁边，您需要将其移到.entry-content div之上。还有其他方法可以做到这一点，并将内容保留在HTML中，但如果您不介意在HTML中首先使用侧边栏，这是最简单的方法。

以下是重新排序代码的示例（为简单起见，使用一些内联样式，但当然应将它们移到样式表中）：

<h1>Main Content</h1>
<div id="sidebar-wrap" style="margin-top: 0; padding-top: 0;">
    <div id="sidebar">
        <p>this is the sidebar.</p>
    </div>
</div>
<div class="entry-content" style="overflow: hidden;">
    <p>There was nothing so VERY remarkable in that; nor did Alice think it so VERY much out of the way to hear the Rabbit say to itself, &#8220;Oh dear! Oh dear! I shall be late!&#8221; (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually TOOK A WATCH OUT OF ITS WAISTCOAT-POCKET, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
    <p>In another moment down went Alice after it, never once considering how in the world she was to get out again. The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
</div>

Answer 2

你需要添加2个额外的div并将页面大小增加到800px左右，添加两个div即

    .leftDiv {
    float:left;
    width:500px;
    }

    .rightDiv{
    float:right;
    width:295px;
    }

    .clear{
    clear:both;
    }

div需要分隔文本和侧栏，例如：

            <div class="leftDiv">


                                <h1>Main Content</h1>
           <div class="entry-content">
               <p>There was nothing so VERY remarkable in that; nor     ll.</p>
            </div>
            </div>

            <div class="rightDiv">

            <div id="sidebar-wrap">
            <div id="sidebar">
            <p>this is the sidebar.</p>
            </div>
            </div>

    <div class="clear"> </div>

CSS右侧栏未对齐右侧

2 个答案: