如何使用CSS将div分成几份并在同一行显示？ - Flexbox和Grid布局教程

"如何使用CSS将div分成几份并在同一行显示？ - Flexbox和Grid布局教程"\n学习使用CSS Flexbox和Grid布局将div容器分成等份并在同一行显示。包含详细步骤和示例代码，帮助你轻松实现页面布局。\n\n使用Flexbox布局：\n1. 在包含这些div的父级容器上应用display: flex;属性，将其设置为一个flex容器。\n2. 将父级容器的宽度设置为所需的宽度。\n3. 设置每个div的flex属性，以决定它们在行中所占的比例。例如，如果要将div分成3份，则可以将每个div的flex属性设置为1。\n4. 如果需要指定每个div之间的间距，可以使用margin属性。\n\n示例代码：\nHTML：\nhtml\n<div class="flex-container">\n <div class="flex-item">1</div>\n <div class="flex-item">2</div>\n <div class="flex-item">3</div>\n</div>\n\nCSS：\ncss\n.flex-container {\n display: flex;\n width: 100%;\n}\n\n.flex-item {\n flex: 1;\n margin: 5px;\n}\n\n\n使用Grid布局：\n1. 在包含这些div的父级容器上应用display: grid;属性，将其设置为一个grid容器。\n2. 使用grid-template-columns属性来定义每个列的宽度。例如，如果要将div分成3份，则可以将grid-template-columns属性设置为"1fr 1fr 1fr"。\n3. 如果需要指定每个div之间的间距，可以使用grid-gap属性。\n\n示例代码：\nHTML：\nhtml\n<div class="grid-container">\n <div class="grid-item">1</div>\n <div class="grid-item">2</div>\n <div class="grid-item">3</div>\n</div>\n\nCSS：\ncss\n.grid-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-gap: 5px;\n}\n\n\n这样，div就会被分成几份，并在一行中显示。