layout 相关问题

在http://pinterest.com/上有“图钉”，即高度不同的，但它们似乎都渲染得很好，没有“间隙”或换行符来中断流程。有没有好的/简单的解释... 在 http://pinterest.com/ 上有“图钉”，即不同高度的，但它们似乎都渲染得很好，没有“间隙”或换行符来中断流程。对于他们如何让 CSS 表现并实现它，是否有一个好的/简单的解释（我希望学习和理解而不是仅仅对他们的 CSS 文件进行货物崇拜！）。预先感谢查看 JQuery Masonry，它将是实现您想要的布局的最简单方法。 http://masonry.desandro.com/ 几个月前，我阅读了一些 Pinterest 的 javascript，以便自己弄清楚这一点。简而言之，他们根本不使用 CSS 来实现这一点。他们通过遍历所有盒子/图钉来动态定位所有盒子/图钉，计算高度，并将其放置在当前高度最短的任何一列的底部（将该盒子的高度添加到其中）。基本上，没有什么技巧，只是 Javascript。 CSS 实际上无法做到这一点你想要的方式。 Javascript，像这个例子，可以。由于浮动或内联阻止内容行的行为方式，CSS 不适合这项工作。您必须动态生成内容的垂直列并将它们并排放置，这意味着您必须努力将当前内容放在顶部。真的，这会有点痛苦。您还会失去对窗口宽度的响应能力。您可以阅读 Pinterest 联合创始人对之前有关此问题的回答：如何复制 pinterest.com 的绝对 div 堆叠布局您现在实际上可以使用 CSS3 来做到这一点： .three-col { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; } 完整指南在这里。查看了所有选项后，我最终以这种方式实现了类似于 Pinterest 的布局：所有 DIV 均为： div.tile { display: inline-block; vertical-align: top; } 这使得它们在行中的位置比浮动时更好。然后，当页面加载时，我会迭代 JavaScript 中的所有 DIV 以消除它们之间的间隙。在以下情况下，它的效果可以接受： DIV 的高度差别不大。您不介意一些轻微的顺序违规（下面的一些元素可以拉到上面）。您不介意底线的高度不同。这种方法的好处 - 您的 HTML 对搜索引擎有意义，可以与防火墙禁用/阻止的 Javascript 一起使用，HTML 中的元素顺序与逻辑顺序匹配（较新的项目在较旧的项目之前）。您可以在 http://SheepOrPig.com/news 看到它正在运行我所做的最简单的方法，这看起来很骨架。但我想到分享...... 这是三栏布局... 前 3 个容器不会添加高度。第 4 个容器将采用第 1 个容器的高度和顶部位置（即 prev().prev().prev()） counter = counter+1; if(counter > 3){ var getTop = $(this).prev().prev().prev().offset(); var getLeft = $(this).prev().prev().prev().offset(); var getHeight = $(this).prev().prev().prev().height(); var countTPH = getTop.top + getHeight - 20; $(this).css({"position":"absolute","top":countTPH+"px","left":getLeft.left+"px"}); } 我放了prev()只是为了让读者简单地理解代码1 安德鲁斯的回答太棒了！我正在寻找一个解决方案，终于得到了它......正如安德鲁通过定位所写的......这是我的 JS 片段。不完美，但方向正确。谢谢安德鲁！ var tilename = 6; for (var i = 0; i < document.querySelectorAll('#tiles .t').length; i++) { document.getElementsByClassName("t"+tilename)[0].style.top = document.getElementsByClassName("t"+(tilename-5))[0].offsetHeight + 10; tilename += 1; } 它的工作原理很简单：在这里，我在几分钟内写了自己的。 http://jsfiddle.net/92gxyugb/1/ 咖啡脚本 tiles = $('.tiles .t') container = $('.tiles').width() width = $('.tiles .t:first').width() columns_height = {} columns = Math.floor container / width space = container % width space = space / (columns-1) for tile,i in tiles column_index = i % columns columns_height[column_index] ?= 0 sp = switch column_index when 0 then 0 when columns then 0 else space * column_index $(tile).css top: columns_height[column_index] left: (column_index * width)+sp columns_height[column_index] += $(tile).height()+space max_height = 0 for k,v of columns_height if v > max_height max_height = v $('.tiles').height max_height-space html <div class='tiles'> <div class='t t1'></div> <div class='t t2'></div> <div class='t t3'></div> <div class='t t4'></div> <div class='t t5'></div> <div class='t t6'></div> <div class='t t7'></div> <div class='t t8'></div> <div class='t t9'></div> <div class='t t10'></div> <div class='t t11'></div> <div class='t t12'></div> <div class='t t13'></div> <div class='t t14'></div> <div class='t t15'></div> <div class='t t16'></div> </div> CSS .tiles {position: relative; width: 500px; background: rgb(140,250,250); } .t { position: absolute; width: 87px; background: rgb(100,100,100); } .t1 { height: 100px; } .t2 { height: 140px; } .t3 { height: 200px; } .t4 { height: 180px; } .t5 { height: 120px; } .t6 { height: 150px; } .t7 { height: 180px; } .t8 { height: 200px; } .t9 { height: 120px; } .t10 { height: 160px; } .t11 { height: 210px; } .t12 { height: 160px; } .t13 { height: 150px; } .t14 { height: 150px; } .t15 { height: 130px; } .t16 { height: 170px; }

css layout

回答 8 投票 0

将内容定位在：伪元素之后，绝对相对于内联元素上边缘

我正在寻找一种仅 CSS 的方法来将 :after 伪元素中的内容绝对相对于另一个（可能是多行）元素的上边缘定位。结果应该类似于：通常...

css layout css-position pseudo-element

回答 3 投票 0

在Flutter中，如何在灵活的容器中添加可滚动的ListView，以便页脚适应其位置？

我试图通过将页脚保留在容器正下方而不是底部来使 ListView 容器适应内容：许多图块：ListView 将是可滚动的并且页脚位于...

flutter listview layout footer singlechildscrollview

回答 1 投票 0

UIScreen Height 使用百分比是否合理？

在 SwiftUi 中使用百分比和 UIScreen Height 进行自动布局是否合理？我对 Swift 很陌生，我需要制作一个自动布局，但据我所知 SwiftUI 没有 UIKi 那样的边距...