gpt4 book ai didi

html - 并排放置两个div?

转载 作者:太空宇宙 更新时间:2023-11-04 02:39:11 24 4
gpt4 key购买 nike

我看过很多类似的问题,但似乎无法解决我的问题。也许是因为滚动条。

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com