並排放置兩個div？
[英]Placing two divs side by side?
問題描述
我看過很多類似的問題，似乎無法解決我的問題。 也許是因為滾動條。
Jfiddle： 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>
3 個解決方案
解決方案1
2 已采納 2016-01-28 22:18:21
您在這里缺少結尾的結束標記：
<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 -->
解決方案2
0 2016-01-28 22:18:31
像這樣嗎？
<div id="content"> <!-- start of content-->
<div id="leftcol"> <!-- start of left col-->
<div id="gesture">
Gesture
</div>
<div id="meaning">
Meaning
</div>
</div>
<div id="middlecol"> <!-- start of middle col-->
Arms crossed
<div id="animation">
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>
CSS：
#content {
width:960px;
height: 1000px;
background-color:grey;
margin: 0 auto;
}
#leftcol {
height: 600px;
width: 300px;
float: left;
background-color:#cc0000;
}
#rightcol {
float: left;
height: 400px;
width: 300px;
background-color:#0000cc;
}
#middlecol {
background-color:#000000;
float:left;
}
#gesture {
overflow-y: scroll;
height: 400px;
width: 300px;
}
#meaning {
}
#category {
overflow-y: scroll;
height: 400px;
width: 300px;
}
解決方案3
0 2016-01-28 22:19:46
我建議您使用%而不是px 。
就像是：
#leftcol {
height: 600px;
width: 48%;
margin-left:1%;
margin-right:1%;
float: left;
}
#rightcol {
float: left;
height: 400px;
width: 48%;
margin-left:1%;
margin-right:1%;
}
並檢查您的middlecol 。
並排放置兩個div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.