设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 关于瀑布流布局实现问题
返回列表 发新帖
查看: 347|回复: 2

关于瀑布流布局实现问题

[复制链接]
蛋挞王
发表于 2025-5-27 10:57:29 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
为什么我这个代码是视频里的一样的，运行时只有一列没有三列
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         body{
  8.                                 background-color: greenyellow;
  9.                                 margin: 10px;
  10.                         }
  11.                         #page{
  12.                                 width: 880px;
  13.                                 margin: 0 auto;
  14.                         }
  15.                         .col{
  16.                                 column-count: 3;
  17.                                 column-gap: 10px;
  18.                                 column-fill:auto;
  19.                         }
  20.                         .pic{
  21.                                 background: #FFF;
  22.                                 padding: 3px;
  23.                                 margin-bottom:20px ;
  24.                         }
  25.                         .pic img{
  26.                                 width: 279px;
  27.                         }
  28.                 </style>
  29.         </head>
  30.         <body>
  31.                 <div id="page">
  32.                         <div class="col">
  33.                                 <div class="pic">
  34.                                         <img src="../img/jeno.jpg" alt="" />
  35.                                         <p>中文名： 李帝努
  36.                                            英文名： Lee Jeno
  37.                                            韩文名： &#51060;&#51228;&#45432;
  38.                                            生日： 2000年4月23日
  39.                                            所属团体： NCT DREAM / NCT
  40.                                            </p>
  41.                                 </div>
  42.                                 <div class="pic">
  43.                                         <img src="../img/jdy.jpg" alt="" />
  44.                                         <p>姓名：金道英   &#46020;&#50689;   Kim Do Young
  45.                        国籍：韩国
  46.                        家庭成员：爸爸、妈妈、哥哥（孔明）
  47.                        MBTI：ISFJ-T
  48.                        生日：1996年2月1日
  49.                        国籍：韩国
  50.                        队内定位：主唱
  51.                        性格：温柔善良，有事业心，照顾团队，性格好
  52.                        </p>
  53.                                 </div>
  54.                                 <div class="pic">
  55.                                         <img src="../img/lkc.jpg" alt="" />
  56.                                         <p>本名：李东赫 (&#51060;&#46041;&#54785;/DONGHYUCK)
  57.                        艺名：楷灿 (&#54644;&#52268;/HAECHAN)
  58.                        MBTI：ENTP-T
  59.                        团队：NCT 127 、 NCT DREAM
  60.                                        </p>
  61.                                 </div>
  62.                                 <div class="pic">
  63.                                         <img src="../img/jisung.jpg" alt="" />
  64.                                         <p>姓名：朴志晟（Jisung Park）
  65.                        英文名: Andy Park
  66.                        生日：2002年2月5日
  67.                        出生地：韩国首尔江北区
  68.                        MBTI: INFP
  69.                        星座：水瓶座
  70.                        血型：0型
  71.                        身高：180
  72.                        所在团体：nct dream

  74.                                        </p>
  75.                                 </div>
  76.                                 <div class="pic">
  77.                                         <img src="../img/sakuya.jpg" alt="" />
  78.                                         <p>姓名：藤永咲哉
  79.                                        SAKUYA
  80.                                        サクヤ、&#49324;&#53216;&#50556;、Fujinaga Sakuya
  81.                                        出生日期：2007年11月18日
  82.                                        星座：天蝎座
  83.                                        MBTI：ENFP
  84.                                        国籍：日本（石川出生埼玉县长大）
  85.                                        昵称：saku、apeach （kakao friends）
  86.                                        </p>
  87.                                 </div>
  88.                                 <div class="pic">
  89.                                         <img src="../img/ten.jpg" alt="" />
  90.                                         <p>中文名：李永钦
  91.                        籍贯: 泰国——（泰籍华裔）
  92.                        泰文本名：&#3594;&#3636;&#3605;&#3614;&#3621; &#3621;&#3637;&#3657;&#3594;&#3633;&#3618;&#3614;&#3619;&#3585;&#3640;&#3621;
  93.                        身高: 172.4cm
  94.                        星座: 双鱼座
  95.                        血型: A型
  96.                        出生日期: 1996年2.27
  97.                        出生地: 泰国曼谷
  98.                        外号：小十，ten，疼等

  100.                                        </p>
  101.                                 </div>
  102.                                 <div class="pic">
  103.                                         <img src="../img/mark1.jpg" alt="" />
  104.                                         <p>李马克（MARK）&#128149;&#128149;
  105.                        韩国名：李敏亨
  106.                        &#11088;&#65039;1999年8月2日出生于加拿大多伦多，加拿大籍韩裔男歌手，男子演唱组合NCT、NCT U、NCT 127、NCT DREAM、Super M成员
  107.                        </p>
  108.                                 </div>
  109.                                 <div class="pic">
  110.                                         <img src="../img/sion.jpg" alt="" />
  111.                                         <p>姓名：吴是温/sion
  112.                        外号：糖SION 吴糖浆 &#50724;&#49664;（OCEAN）
  113.                        星座：金牛座
  114.                        出生地：木浦
  115.                        出生日期：2002.5.11
  116.                        MBTI：INTJ
  117.                        座右铭：成为明天比今天更进步的人吧
  118.                        所在组合：nct wish

  120.                                        </p>
  121.                                 </div>
  122.                                 <div class="pic">
  123.                                         <img src="../img/yuta.jpg" alt="" />
  124.                                         <p>姓名：中本悠太&#129505;&#129505;
  125.                        国籍：日本&#127471;&#127477;
  126.                        生日：1995.10.26
  127.                        星座：天蝎座&#9807;
  128.                        血型：A型
  129.                        身高：176cm
  130.                        体重：不详
  131.                        经纪公司：SM
  132.                        所属组合：NCT127
  133.                        别名（外号）：ugg（悠哥哥），YUTA，山男人，章鱼小丸子

  135.                                        </p>
  136.                                 </div>
  137.                                
  138.                                
  139.                         </div>
  140.                        
  141.                 </div>
  142.                
  143.         </body>
  144. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

BrendanEich
发表于 2025-5-27 10:59:00 | 显示全部楼层
瀑布流布局问题分析及解决方案

你的代码主要存在两个关键问题：

  • 容器宽度计算错误
    当前图片宽度279px + 列间距10px，三列总宽度应为：
    (279px * 3) + (10px * 2) = 857px
    但你的#page容器宽度是880px，导致空间不足自动回退成一列
  • CSS列布局未生效
    图片元素需要直接作为列容器的子元素，当前结构可能存在嵌套问题


修正后的代码：


  2. <style>
  3. #page {
  4.     width: 880px;
  5.     margin: 0 auto;
  6. }
  7. .col {
  8.     column-count: 3;      /* 定义列数 */
  9.     column-gap: 10px;     /* 列间距 */
  10.     column-fill: balance; /* 更优的填充方式 */
  11. }
  12. .pic {
  13.     break-inside: avoid;  /* 防止内容被截断 */
  14.     background: #FFF;
  15.     padding: 3px;
  16.     margin-bottom: 10px;
  17. }
  18. .pic img {
  19.     width: 100%;          /* 自适应列宽 */
  20.     height: auto;
  21. }
  22. </style>

  24. <div id="page">
  25.     <div class="col">
  26.         <!-- 所有.pic元素直接放在这里 -->
  27.         <div class="pic">内容1</div>
  28.         <div class="pic">内容2</div>
  29.         ...（其他内容）
  30.     </div>
  31. </div>
复制代码


关键修改点：
1. 图片宽度改为100%自适应列宽
2. 添加break-inside: avoid防止内容断裂
3. 确保所有内容都在单个.col容器内

如果仍然不生效，建议检查：
  • 浏览器是否支持column布局（现代浏览器均支持）
  • 是否存在其他CSS覆盖了当前样式
  • HTML结构是否正确嵌套


以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 前天 12:35 | 显示全部楼层
很简单，因为浏览器为了保证里面的块能完整放下，在宽度不足时会自动把 column-count 调小。

只要窗口再窄一点（笔记本小窗口、手机竖屏等），列宽就低于 285 px，浏览器就会把列数从 3 降到 2 甚至 1，于是鱼油看到只有“一列”。

最简单，让项目可以缩放

  1. .pic{
  2.   padding:3px;
  3.   box-sizing:border-box;  /* 让 padding 计入宽度 */
  4. }
  5. .pic img{
  6.   width:100%;            /* 图片随列宽收缩 */
  7. }
复制代码

这样 .pic 最小只有列宽本身，不会撑破布局。

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-23 13:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表