div 多行盒子均匀分布的两种方式

最新推荐文章于 2025-03-22 20:59:38 发布
最新推荐文章于 2025-03-22 20:59:38 发布
阅读量7.5k 收藏 14
点赞数 3
分类专栏： HTML css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjw_zyfx/article/details/101776543
版权
本文探讨了两种常见的CSS布局方法：Flex布局和Float布局。通过具体代码示例，展示了如何使用Flex布局和Float布局来创建统一的元素排列，并比较了它们在实现相同效果时的不同之处。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一种：

样式：

.box{
    background-color: yellow;
    width: 350px;
    height: 100px;
    display: flex;
    flex-flow: row wrap;
    /*align-items: center;*/
    /*justify-content: space-between;*/
}
.box>div{
    width: 50px;
    height: 20px;
    margin-right: 10px;
    background-color: dodgerblue;
}
.box>div:nth-child(6){
    margin-right: 0;
}

效果：

第二种 float 方式

代码：

.box{
    background-color: yellow;
    width: 350px;
    height: 100px;
}
.box>div{
    width: 50px;
    height: 20px;
    margin-right: 10px;
    background-color: dodgerblue;
    float: left;
}
.box>div:nth-child(6){
    margin-right: 0;
}

效果：

弹性盒（Flexbox）布局完全指南：实现灵活自适应的网页排列
a451319296的博客
06-18 3177
本教程提供了关于弹性盒（Flexbox）布局模型的全面指南，帮助您掌握如何利用弹性盒构建灵活自适应的网页排列。通过学习本教程，您将了解弹性盒的基本概念、容器和弹性盒子属性的使用方法，并能够创建各种常见的布局效果。
2023大厂高频面试题之CSS篇
zag666的博客
05-18 1853
css的position属性取值 css选择器优先级和权重 box-sizing属性 CSS 盒子模型 CSS实现三角形 CSS布局 弹性布局display:flex 实现一个垂直水平居中 隐藏页面元素的方法 style-components HTML脱离文档流的方法 block，inline和inlinke-block transition与animation区别...
子元素从左往右排列，均匀分布，自动换行（子元素个数不确定）
Alice_hhu的博客
10-28 4722
经常碰到一些页面，展示不确定个数的卡片，要求从左往右排列，均匀分布，超出指定个数需要换行，如果一行不满指定个数，仍然从左开始排列。 如果每行个数相同，那使用 flex弹性布局，设置 justify-content: space-between即可，但个数不确定，如果最后一行个数不满，那就跟前面几行的排列样式不一致了 因此，自己写了一个使用 float浮动➕calc计算来达到此要求的 css样式，以此记录（以每行5个为例） HTML代码 <p>一行 不满5个</p> &.
div均匀分布代码实例
weixin_34138521的博客
08-24 1473
多个div在同一行以相同间隔分布: 这样的布局效果使用非常的频繁，也就是让多个div在一行分布，并且div于div之间的间隙是一样的，多用在对于产品的展示之用，下面就介绍一下如何实现此中布局，代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title&...
HTML CSS 使div中的子元素横向排列，并均匀分布
最新发布
2302_81910218的博客
03-22 438
【代码】HTML CSS 使div中的子元素横向排列，并均匀分布。
div+css让div内部元素均匀分布
热门推荐
qq690388648的专栏
09-07 3万+
RT，做网站中有多个单选按钮，想让其
一个大divl里三个小div水平均匀分布
changfeng6616的博客
03-08 3万+
效果图： 代码： css代码： .mainDiv { float: left; margin-left: 10%; width: 80%; margin-top: 2%; height: 200px; background-color: #FFEBCD; } .viceDiv_1,.viceDiv_2,.viceDiv_3 { ...
在网页绝对定位处规律分布三列多行的div盒子
qq_35035975的博客
04-28 223
效果如下 <template> <div> <div v-for="(item, index) in list" :style="[ { width: '350px', height: '180px', position: 'absolute',
元素水平均匀分布
Keep_Doing的博客
10-12 957
1.浮动元素不定宽 <div class="c"> <div class="b"> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> </d
CSS 弹性盒子
qq_27009517的博客
12-25 651
CSS 弹性盒子：使用 display: flex 定位两个盒子 这节会使用一种不同的挑战方式来学习一下如何更灵活地使用 CSS 布局元素。首先，我们会先用一个挑战解释原理，然后使用“弹性盒子”（flexbox）调整一个推文组件的样式来完成挑战。 只要在一个元素的 CSS 中添加display: flex;，就可以使用其他 flex 属性来构建响应式页面了。 为#box-container添加display属性，设置其值为 flex。 <style> #box-c...
深入理解CSS弹性盒子模型（Flexbox）
2301_79175212的博客
10-06 1649
在现代网页布局中，CSS弹性盒子模型（Flexbox）无疑是一个强大且灵活的工具。它简化了复杂布局的实现，尤其是在响应式设计中表现尤为出色。本文将详细介绍Flexbox的基本概念、核心属性以及如何在实际项目中应用Flexbox,一起来学习吧Flexbox，全称为Flexible Box Layout Module，是CSS3引入的一种布局模式。它旨在为容器中的项目提供更加灵活和高效的布局方式，能够轻松地在不同屏幕尺寸和设备上实现自适应布局。
div+css让div内部元素如单选按钮均匀分布
09-25
网站中有多个单选按钮，想让其均匀分布，这样会比较好看一点，网上的方法，大都不实用，下面是经测试比较成功的方法，大家可以看看
Flexbox布局中的伸缩盒子
它提供了一种更加高效的方式来对齐、排列和分布容器中的元素。Flexbox布局可以轻松地实现响应式设计，使得网页在不同设备和屏幕尺寸下都能得到合适的呈现。 ## 1.2 伸缩盒属性介绍 在Flexbox布局中，伸缩盒（flex ...
通过css把一个div盒子均分成上三个下三个
l10103的博客
04-07 3291
通过css把一个div盒子均分成上三个下三个
100个Div水平垂直均匀分布CSS
DyuanH的博客
08-04 2998
需求 容器宽度不固定，div宽度高度固定，间距固定并贴合容器的边。 重要一点，要跟设计稿的像素一样，不然计算好间距。 实现 简单3行代码 .container{ display: grid; //网格布局 gap: 18px; //元素之间间距18px grid-template-columns: repeat(auto-fill, 60px); //水平自动填充满元素，每个宽度为60px .son{ width:60px; height:60px; } } 优点 不用考虑最后一个
HTML入门（flex拆行）————DAY6
详情请看注释
10-17 1095
flex元素是一种类似于float让div元素在所属框内更好的找到自己应该在的位置。 但是flex默认的里面的盒元素是不会自己进行折行的，所以需要进行一些设置，来得到更好的效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n...
js//编程题（已知一包螺丝钉有n个，现有m个盒子，要求将所有螺丝钉平均分配到每个盒子。）
weixin_37877794的博客
08-03 212
Q：已知一包螺丝钉有n个，现有m个盒子，要求将所有螺丝钉平均分配到每个盒子。 例如螺丝钉为55，盒数为2时，第一个盒子放28，第二个盒子放27. function playBox2(total,boxNum){ // 每个盒子基础螺丝个数 var baseNum = Math.floor(total/boxNum) // 多出来的螺丝个数 var leftNum = total % boxNum // 放螺丝 .
html如何让元素自动分配,html – 如何在div内均匀分配元素？
weixin_39913141的博客
05-31 917
左对齐的内容看起来像这样(一个或多个点代表一个空格)：+----------------------------------------------+|word.word.word.word |+----------------------------------------------+(1)text-align：justify不能证明最后一行...
前端Flex布局全面解析与代码实例
Flex布局，全称为弹性盒子布局（Flexible Box Layout），是一种用于在不同屏幕尺寸和设备上提供一致布局的方式。它允许容器内的项目能够灵活地伸缩以适应可用空间，无论容器的大小如何变化。 ### Flex布局核心概念 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值