gpt4 book ai didi

html - 并排对齐2个div

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

我在让 2 个 div 并排对齐时遇到问题。据我了解,使用“float:left”应该可以做到,但事实并非如此——div 出现在彼此之上。我虽然可能是浏览器问题,但我在 FF、Opera 和 IE 上都试过了,结果是一样的。

这是我的代码

<head>
<style>
div.container{
position: relative;
width:800px;
height: 1000px;
background-color: red;
overflow: hidden;
}

div.banner{
position: relative;
align:left;
width: 800px;
height: 100px;
float:left;
background-color: blue;
clear:both;
}
div.navBar{
position: absolute;
width: 200px;
height: 300px;
float:left;
background-color: yellow;
clear: left;
}

div.content{
position: absolute:
width: auto;
height: auto;
float:left;
background-color: orange;
clear: right;
}
</style>
</head>

<body>
<div name="banner" class="banner">
This will be the banner
</div>

<div name="container" class="container">
<div name="navBar" class="navBar">
This will be the navbar
</div>

<div name="content" class="content">
This will be the content
</div>

</div>
</body>

所有的 div 都是不同的颜色,因此更容易看到什么会去哪里。

最佳答案

position:absolute 使它们重叠。

移除绝对定位,它应该可以正常工作。

在此处查看实际操作:http://jsfiddle.net/5ULsG/

关于html - 并排对齐2个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9350646/

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