Question

由于我的博客内容居中，我的右侧边栏已经低于我的内容。

如何将其恢复原状以使其位于我页面的右侧？（在右侧边框和页面边缘之间）。

直播链接： https://www.moneynest.co.uk/how-to-choose-a-broker/

代码：

<html>
<body class="post-template-default single single-post postid-594 single-format-standard logged-in admin-bar no-customize-support nolayout windows chrome override" itemscope itemtype="http://schema.org/WebPage"><div class="site-container">
<div class="site-inner">    
    <div class="content">
        <div id="container">
            <div class="central-container">
                <div class="middle-content">
                <div class="inner-post-head">
                </div>
                    <div class="data-content">
    <!--MAIN CONTENT HERE -->         
                  </div><!-- End .middle-content -->
    </div>
        </div><!-- End #container -->
  </div><!-- End #content -->
     <aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope itemtype="http://schema.org/WPSideBar" id="genesis-sidebar-primary"><h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2><section id="text-9" class="widget widget_text"><div class="widget-wrap">          <div class="textwidget">
 <!--SIDE BAR CONTENT HERE--></div>
  <!--<div id="popular-articles">
    <p class="popular-articles-text">Popular articles</p>
  </div>-->
</div>
</div>
        </div>
<section id="text-10" class="widget widget_text"><div class="widget-wrap"   
        </div></section>
        </div>
        </aside>
<!--END OF SIDEBAR--!>
<!--FOOTER STUFF-->
        </body>
</html>

使用自定义Genesis主题和Bootstrap运行Wordpress。

Answer 1

position: fixed;
right: 0;
top: 0;

或改为使其更薄（宽度：80％）并给出内容显示：内联

Answer 2

除了从.content中删除左边距之外，我还建议从.site-inner中删除填充并添加margin:0 auto;。

Answer 3

我在你的页面测试并做了这个。这是工作。只需减少相关媒体查询中的margin-left属性。

@media only screen and (min-width: 1200px)
(index):27
.content {
    margin-left: 10%;
}

Answer 4

您的样式表有以下代码

.site-inner, .wrap {
    max-width: 1200px;
}

由于你的内容以margin-left为中心，这个1200px不足以保持你的侧边栏。所以请将其更改为低于一，以便它适合您

.site-inner, .wrap {
    max-width: 100%;
}

方法2：使您的内容部分集中在一起，并使侧边栏位于右侧。风格如下：

.site-inner{
position: relative;
}
.content {
width: 792px;
margin: 0 auto !important;
float: none;
}
.sidebar-primary {
    position: absolute;
    width: 240px !important;
    right: 0px;
    top: 0px;
}

将我的右侧边栏置于页面顶部

4 个答案: