全宽标题和侧边栏与创世框架中的入口内容对齐

时间:2017-08-01 17:02:17

标签: html css wordpress genesis

我遇到了使用创世纪主题构建和设计侧边栏和标题的问题。

我想要一个全宽的文章标题区域,其边栏与条目内容对齐。

我尝试将标题区域移动到genesis_before_content挂钩,但这会导致标题和帖子信息超出文章标记和关联模式,这是不理想的。

我尝试在css中将入口标题内容指定为全宽,然后将侧边栏的顶部设置为在页面下方开始x个像素数,以使其与条目内容对齐。这样的问题是,如果标题文本包含多行,则侧边栏与条目内容不对齐。

这是我目前如何安排css的小提琴:

.wrapper {
    background-color:#f9f9f9;
    width:600px;
    height:800px;
    font-size:40px;
    color: #FFF;
}

.content {
    background-color:blue;
    opacity:0.2;
    float:left;
    position:relative;

    width:300px;
    height:100%;
}

.header {
    background-color:red;
    opacity:0.5;
    position:relative;
    width:600px;
    height:200px;
    display:inline-block;
    text-align:center;
}

.sidebar {
    background-color: green;
    opacity: 0.2;
    width: 300px;
    height: calc(100% - 200px);
    float: right;
    position: relative;
    top: 200px;
}
<div class="wrapper">
    <div class="content">
        <div class="header">Title</div>
        <div class="entry">Entry content</div>
    </div>
    <div class="sidebar">Sidebar widgets</div>
</div>

https://jsfiddle.net/j9z4tjod/

任何人都可以帮我找到解决方案吗?

由于

0 个答案:

没有答案