html - 将我的右侧边栏带到页面顶部

标签 html css wordpress

自从将我的博客内容居中后,我的右侧边栏已经低于我的内容。

我怎样才能把它调回来,让它位于我页面的右侧? (在右侧边框和页面边缘之间)。

直播链接: 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。

最佳答案

您的样式表包含以下代码

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

由于您已使用 margin-left 将您的内容居中,所以这 1200 像素不足以容纳您的侧边栏。所以请将其更改为以下一个,以便它适合您

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

方法二: 使您的内容部分始终集中,并使您的侧边栏位于右侧。样式如下:

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

关于html - 将我的右侧边栏带到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41908831/

相关文章:

css - 在 CSS 中组合 :last-child with :not(. 类)选择器

javascript - 使用 jQuery 在 Bootstrap Carousel 中的同一张幻灯片上显示多个元素

javascript - 在 jQuery 中切换 div 的高度

javascript - 单击时更改鼠标指针

javascript - 如何在不使用 CSS 的情况下隐藏 DIV?

javascript - 实现没有Position属性的绝对定位,使用Margin/Padding

java - 使用 JSoup 获取所有文本链接

PHP递归函数问题。

javascript - JQuery ajax 从来没有成功。有什么错误吗?

php - Htaccess 只允许特定的 URL 不加载它的 CSS