我得到了一个只有几个 DIV 元素的 HTML 页面。这些元素的左边距值是随机生成的。
附加信息:HTML 文件中的 DIV 元素必须按照给定的顺序保留。
生成的页面如下所示:
是否有一种方法可以使用纯CSS将DIV元素与页面顶部对齐?
如果它们不完全在前面的DIV旁边,DIV元素应该堆叠。这就是为什么元素2和4在第二行的原因。
由于没有“float: top;”命令,我不知道如何实现以下布局:
由于我的问题仍然不清楚,这里有另一个示例以澄清,即布局应该适用于随机生成的DIV元素:
如果元素无法放置在前面的元素旁边,则应堆叠。如果适合,则应与顶部对齐。
如果没有纯CSS的方法,也可以使用JS解决方法。
附加信息:HTML 文件中的 DIV 元素必须按照给定的顺序保留。
<html>
<head>
<style type="text/css">
.box{
height: 50px; width: 50px; border: 1px solid black;
text-align: center; margin-bottom: 5px;
}
</style>
<title></title>
</head>
<body>
<div class="box">1</div>
<div class="box" style="margin-left: 30px">2</div>
<div class="box" style="margin-left: 90px">3</div>
<div class="box" style="margin-left: 120px">4</div>
<div class="box" style="margin-left: 240px">5</div>
</body>
</html>
生成的页面如下所示:
![实际页面布局](https://istack.dev59.com/W9HmL.webp)
![所需页面布局](https://istack.dev59.com/qb7UB.webp)
![输入图像描述](https://istack.dev59.com/DbRPA.webp)
如果没有纯CSS的方法,也可以使用JS解决方法。
display:inline
,它能够正常工作。 - Kaushik