gpt4 book ai didi

html - 如何将宽度为 1000px 的 DIV 并排对齐?

转载 作者:太空宇宙 更新时间:2023-11-03 19:20:46 25 4
gpt4 key购买 nike

我似乎无法正确 float DIV。我想要实现的是能够将 4 个 DIV 彼此相邻放置。每个都以 0px 对齐到顶部,并且间隔 30 像素左右,但我不能使用绝对定位。 DIV 的大小根据屏幕大小进行调整。所以,我需要相对定位 DIV。当我尝试 float DIV 时,它们只是彼此重叠。

这是我目前所拥有的。

<head>
<style type="text/css">
.b1{
position:relative;
margin-left:50px;
float:left;
width:1000px;
height:200px;
background-color:#000;
}
.b4{
position:relative;
top:0px;
left:30px;
float:right;
width:1000px;
height:200px;
background-color:#000;
}
</style>
</head>

<body>
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"></div>
</body>

最佳答案

问题是您的视口(viewport)。当您 float 一系列元素时,如果视口(viewport)宽度不足以在一行上显示它们,它们将换行到下一行。要明白我的意思,请将 .b1 的宽度减小到 100。

如果你真的想要它可以水平滚动,你可以添加一个容器 div。

父容器样式为:

overflow: scroll;

关于html - 如何将宽度为 1000px 的 DIV 并排对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3999262/

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