我看过很多类似的问题，但似乎无法解决我的问题。也许是因为滚动条。
fiddle : https://jsfiddle.net/qdyw4rms/
我想并排放置这两个侧边栏。 CSS:
#content {
width:960px;
height: 1000px;
background-color:grey;
margin: 0 auto;
}
#leftcol {
height: 600px;
width: 300px;
float: left;
}
#rightcol {
float: left;
height: 400px;
width: 300px;
margin-left: 660px;
}
#gesture {
overflow-y: scroll;
height: 400px;
width: 300px;
}
#category {
overflow-y: scroll;
height: 400px;
width: 300px;
}
HTML:
<body>
<div id="content"> <!-- start of content-->
<div id="leftcol"> <!-- start of left col-->
<div id="gesture">
Gesture
</div>
<div id="meaning"
Meaning
</div>
</div><!-- end of left col -->
<div id="middlecol"> <!-- start of middle col-->
Arms crossed
<div id="animation">
</div>
</div> <!-- end of middle col-->
<div id="rightcol"> <!-- start of right col -->
<div id="category">
Category
</div>
<div id="region">
Region
</div>
</div> <!-- end of right col-->
</div> <!-- end of content -->
</body>
最佳答案
你在这里缺少结束结束标记:
<div id="meaning"
Meaning
</div>
应该是:
<div id="meaning">
Meaning
</div>
并且您正在将 div 关闭到更早的位置
片段:
#content {
width: 960px;
height: 1000px;
background-color: grey;
margin: 0 auto;
}
#leftcol {
height: 600px;
width: 300px;
float: left;
}
#rightcol {
float: left;
height: 400px;
width: 300px;
margin-left: 660px;
}
#middlecol {} #gesture {
overflow-y: scroll;
height: 400px;
width: 300px;
}
#meaning {} #category {
overflow-y: scroll;
height: 400px;
width: 300px;
}<div id="content">
<!-- start of content-->
<div id="leftcol">
<!-- start of left col-->
<div id="gesture">
Gesture
</div>
<div id="meaning">
Meaning
</div>
</div>
<!-- end of left col -->
<div id="middlecol">
<!-- start of middle col-->
Arms crossed
<div id="animation">
</div>
</div>
<!-- end of middle col-->
<div id="rightcol">
<!-- start of right col -->
<div id="category">
Category
</div>
<div id="region">
Region
</div>
</div>
<!-- end of right col-->
</div>
<!-- end of content -->关于html - 并排放置两个div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35072971/