鱼C论坛

 找回密码
 立即注册
查看: 64|回复: 1

关于瀑布流布局实现问题

[复制链接]
发表于 7 天前 | 显示全部楼层 |阅读模式

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

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

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

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

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

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

  131.                                        </p>
  132.                                 </div>
  133.                                
  134.                                
  135.                         </div>
  136.                        
  137.                 </div>
  138.                
  139.         </body>
  140. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 7 天前 | 显示全部楼层
瀑布流布局问题分析及解决方案

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

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


修正后的代码:


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

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


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

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


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

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2025-6-3 02:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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