Div不会留在正确的地方

Question

我目前遇到http://jsfiddle.net/XB2r7/6/或<：p>的问题

.content {
margin-right: auto;
margin-left: auto;
background-color:rgba(64,64,64,0.9);
width: 1000px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #333;
color: #fff;
overflow: auto;
margin-bottom: 20px;
box-shadow: 0px 1px 1px #333;
}
.clear {
clear: both;
}
.sidebar {
width: 23.5%;
height: auto;
display: block;
float: left;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);
}
.content2 {
width: 73.5%;
height: auto;
display: block;
float: right;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);

}
.h1 {
font-weight: bold;
}
.content hr {
border: 0;
height: 2px;
background: url('bg3.jpg');
}

正如你在JSFiddle看到的那样，随着我放置第二个content2-div，侧边栏正在下降。有没有办法解决这个问题而不将它们放在其他容器中？

Answer 1

从float:left类

中删除.sidebar

.sidebar {
    float:left; /*remove*/
}

Demo

Answer 2

我已更新your fiddle.

刚删除.sidebar {float:left}

Answer 3

试试这个

<div class="content">
  <div class="sidebar">
<h1>Consectetur adipiscing elit.</h1>
<hr>
Morbi vel porttitor augue, eu rhoncus massa. Vivamus venenatis, arcu at euismod semper, ipsum nunc interdum ante, in semper mauris metus eu risus. Aliquam nibh massa, venenatis in turpis vitae, tempor lacinia metus. Vestibulum sed metus ut lectus lacinia tincidunt ac eu erat. Phasellus eu fermentum lacus. Duis vitae bibendum magna, a ullamcorper libero. In hac habitasse platea dictumst. Phasellus molestie nisl id lectus blandit, ac rhoncus dui pellentesque. Praesent sit amet tempus turpis, eu elementum mauris. Sed ipsum dui, luctus eu vehicula id, eleifend nec libero. Donec.
  <h1>Consectetur adipiscing elit.</h1>
<hr>
Morbi vel porttitor augue, eu rhoncus massa. Vivamus venenatis, arcu at euismod semper, ipsum nunc interdum ante, in semper mauris metus eu risus. Aliquam nibh massa, venenatis in turpis vitae, tempor lacinia metus. Vestibulum sed metus ut lectus lacinia tincidunt ac eu erat. Phasellus eu fermentum lacus. Duis vitae bibendum magna, a ullamcorper libero. In hac habitasse platea dictumst. Phasellus molestie nisl id lectus blandit, ac rhoncus dui pellentesque. Praesent sit amet tempus turpis, eu elementum mauris. Sed ipsum dui, luctus eu vehicula id, eleifend nec libero. Donec.
</div>

      <div class="content2">
<h1>Duis ac felis neque. Ut leo massa, hendrerit et nulla at.</h1>
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet leo at eros convallis rhoncus. Sed malesuada tincidunt dolor, nec ornare sem tincidunt vel. Maecenas placerat ipsum eu quam semper, eu tincidunt felis fringilla. Ut placerat vehicula vulputate. Sed id ultricies odio, eu congue nisi. Vivamus venenatis mauris id urna ullamcorper, ut posuere ipsum sodales. Proin gravida varius urna eu eleifend. Praesent a interdum sapien. Cras scelerisque nisi sit amet nibh convallis bibendum a eu diam. Nam porttitor elementum fringilla. Etiam accumsan dictum metus vitae cursus.
<br><br>
Vivamus ante mi, tincidunt quis commodo tempor, consequat vel nisl. Phasellus vestibulum elit a dui laoreet, nec congue velit vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam condimentum orci sit amet orci imperdiet gravida. Proin porta luctus quam, quis bibendum urna lobortis porttitor. Pellentesque nec lobortis ipsum. Pellentesque sit amet felis quis risus luctus semper in id ante. Nullam condimentum neque eget sollicitudin interdum. Duis imperdiet enim felis, in facilisis nisl facilisis at. Aliquam ut enim vehicula ligula dignissim molestie. Quisque dignissim quis ante ut eleifend. Suspendisse vitae mi vitae ligula interdum egestas ut sed nibh.
<br><br>
Mauris sit amet egestas augue. Aliquam ultrices tristique dolor vel luctus. Vestibulum cursus eleifend magna nec varius. Sed cursus magna in mi feugiat eleifend id quis purus. Fusce sollicitudin ultricies augue ac viverra. Curabitur tempor feugiat justo eu porta. Suspendisse eu sollicitudin ipsum. Proin rutrum turpis id massa molestie sollicitudin. Maecenas sit amet justo cursus, blandit mi sit amet, scelerisque quam. Nam ut arcu fringilla, sodales nibh sed, sodales elit. Nam vel tortor sed erat interdum sollicitudin sed non libero. Donec tristique, justo id interdum fermentum, lacus augue dictum nisl, sit amet adipiscing est enim vitae neque.
</div>

<div class="content2">
<h1>Duis ac felis neque. Ut leo massa, hendrerit et nulla at.</h1>
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet leo at eros convallis rhoncus. Sed malesuada tincidunt dolor, nec ornare sem tincidunt vel. Maecenas placerat ipsum eu quam semper, eu tincidunt felis fringilla. Ut placerat vehicula vulputate. Sed id ultricies odio, eu congue nisi. Vivamus venenatis mauris id urna ullamcorper, ut posuere ipsum sodales. Proin gravida varius urna eu eleifend. Praesent a interdum sapien. Cras scelerisque nisi sit amet nibh convallis bibendum a eu diam. Nam porttitor elementum fringilla. Etiam accumsan dictum metus vitae cursus.
<br><br>
Vivamus ante mi, tincidunt quis commodo tempor, consequat vel nisl. Phasellus vestibulum elit a dui laoreet, nec congue velit vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam condimentum orci sit amet orci imperdiet gravida. Proin porta luctus quam, quis bibendum urna lobortis porttitor. Pellentesque nec lobortis ipsum. Pellentesque sit amet felis quis risus luctus semper in id ante. Nullam condimentum neque eget sollicitudin interdum. Duis imperdiet enim felis, in facilisis nisl facilisis at. Aliquam ut enim vehicula ligula dignissim molestie. Quisque dignissim quis ante ut eleifend. Suspendisse vitae mi vitae ligula interdum egestas ut sed nibh.
<br><br>
Mauris sit amet egestas augue. Aliquam ultrices tristique dolor vel luctus. Vestibulum cursus eleifend magna nec varius. Sed cursus magna in mi feugiat eleifend id quis purus. Fusce sollicitudin ultricies augue ac viverra. Curabitur tempor feugiat justo eu porta. Suspendisse eu sollicitudin ipsum. Proin rutrum turpis id massa molestie sollicitudin. Maecenas sit amet justo cursus, blandit mi sit amet, scelerisque quam. Nam ut arcu fringilla, sodales nibh sed, sodales elit. Nam vel tortor sed erat interdum sollicitudin sed non libero. Donec tristique, justo id interdum fermentum, lacus augue dictum nisl, sit amet adipiscing est enim vitae neque.
</div>
</div>

Answer 4

更改HTML元素的顺序：

http://jsfiddle.net/XB2r7/6/

<div class="content"></div>
<div class="sidebar"></div>

<div class="content"></div>
<div class="sidebar"></div>

Answer 5

在你的css文件中试试这个：

    .content {
margin-right: auto;
margin-left: auto;
background-color:rgba(64,64,64,0.9);
width: 1000px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #333;
color: #fff;
overflow: auto;
margin-bottom: 20px;
box-shadow: 0px 1px 1px #333;
}
.clear {
clear: both;
}
.sidebar {
width: 23.5%;
height: auto;
display: block;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);
}
.content2 {
width: 73.5%;
height: auto;
display: block;
float: right;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);

}
.h1 {
font-weight: bold;
}
.content hr {
border: 0;
height: 2px;
background: url('bg3.jpg');
}

它有效：