Question

我为此寻求帮助感到愚蠢我确信解决方案可能很简单，但目前我无法理解。

我的问题是如果侧边栏扩展超过内容区域，那么它就会错位。目前我似乎无法找到解决方案。

这是CSS：

.latest-photos {
background: #302c2c;
box-shadow: inset 0 0 75px rgba(0, 0, 0, 0.5);
height: 80px;
color: #fff;
padding: 5px;
margin: -335px 0 0 0;
position: absolute; }

/****************************
CONTENT
****************************/
.content {
float: left;
position: absolute; }

/* SIDEBAR */
.sidebar {
width: 380px;
margin: -210px 0 0 0;
float: left; }
.sidebartitle {
 font: 1.313em 'karla', sans-serif;
 color: #000;
 text-align: justify;
 padding: 0 0 10px 0; }
.sidebarcontent {
 padding: 5px;
 background: #f8f7f7;
 font: 1em 'Lato', sans-serif;
 color: #000;
 margin: 0 0 25px 0; }

/* MAIN CONTENT */
.entry {
width: 610px;
margin: -645px 0 0 390px;
float: right; }
.entrytitle {
 font: 1.313em 'karla', sans-serif;
 color: #000;
 text-align: justify;
 padding: 0 0 10px 0; }
.entrycontent {
 padding: 5px;
 background: #f8f7f7;
 font: 1em 'Lato', sans-serif;
 color: #000;
 margin: 0 0 30px 0;
 border-bottom: 5px solid #330000; }

这是索引：

<div class="wrapper">
<div class="latest-photos">Latest images go here.</div>


    <div class="sidebar cf">
        <div class="sidebartitle">
            Sidebar Title here
        </div>
        <div class="sidebarcontent">
            This is a content box. All sidebar here! All chat boxes and what-have-not go here!!
        </div>
    </div>

    <div class="entry cf">
        <div class="entrytitle">
            Entry title here!
        </div>
        <div class="entrycontent">
            This is out main content area!! Here is where all the latest news, images, and more will be posted.
            This new verion will be great!
        </div>
    </div>


</div>

感谢任何帮助！

Answer 1

在制作骨架时始终尝试制作position: static;。我刚刚使用相同的html结构添加了新样式，并为侧边栏和内容div <div class="content-wrap">添加了包装找到下面的JSfiddle链接。

http://jsfiddle.net/shanidkv/sjz91ccd/

内容和侧边栏不对齐

1 个答案: