绝对定位实现div块垂直排列，适配任意网页尺寸 - CSS技巧

{"title":"绝对定位实现div块垂直排列，适配任意网页尺寸 - CSS技巧","description":"使用CSS绝对定位和top属性实现div块依次从上到下展示，并适配任意大小的网页。本文提供详细的HTML和CSS代码示例，并解释原理。","keywords":"绝对定位, top属性, div块, 垂直排列, 适配网页尺寸, CSS技巧, 网页布局","content":"可以使用CSS的绝对定位和top属性来实现div块依次从上到下展示，并适配任意大小的网页。\n\nHTML结构如下：\nhtml\n<div class=\"container\">\n <div class=\"block\">Block 1</div>\n <div class=\"block\">Block 2</div>\n <div class=\"block\">Block 3</div>\n</div>\n\n\nCSS样式如下：\ncss\n.container {\n position: relative;\n}\n\n.block {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100px;\n background-color: #f0f0f0;\n margin-bottom: 10px;\n}\n\n\n以上代码中，.container设置了相对定位，使其成为.block的参照物。.block设置了绝对定位，通过top: 0属性使其始终位于.container的顶部，并通过margin-bottom: 10px属性设置了块之间的间距。\n\n这样，不论网页的大小如何变化，div块都会依次从上到下展示，并且适应网页的宽度。"}