Tag: 流体布局

具有流体宽度和高度的行中相等高度div（或li）（完成90％）: 嘿所以我发现CSS-tricks Chris Coyier发布了这个甜蜜的jquery片段，它将div元素高度重置在页面上（位于同一行）与最高元素相同的位置。问题此解决方案几乎适用于流体宽度布局，并在顶部位置更改时重置高度，但在页面首次加载时将其重置为行中当前最高元素的原始高度。这是一个问题，因为自从这个页面首次加载以来，最高元素的高度可能已经改变了，因为使用了像ems这样的相对单位或者因为带有段落的自动换行。建议的解决方案解决方案是将行的元素高度设置为最高元素的当前高度，而不是原始高度。我没有成功完成这个。以下是“li.half”是要比较和resize的元素的片段。 jQuery(document).ready(function($) { // these are (ruh-roh) globals. You could wrap in an // immediately-Invoked Function Expression (IIFE) if you wanted to… var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(); function setConformingHeight(el, newHeight) { // set the height to something new, but remember the original […]

如何使用砌体启用无限滚动？: 那么如何在我的砌体流体布局中添加或集成无限滚动？我已经用谷歌搜索但不明白。这是我到目前为止所得到的： /** * Base js functions */ $(document).ready(function(){ var $container = $(‘.container’); var gutter = 20; var min_width = 270; $container.imagesLoaded( function(){ $container.masonry({ itemSelector : ‘.box’, gutterWidth: gutter, isAnimated: true, columnWidth: function( containerWidth ) { var box_width = (((containerWidth – 2*gutter)/3) | 0) ; if (box_width < min_width) { box_width = (((containerWidth – gutter)/2) […]

在移动视图中删除HTML元素？: 我没有使用jquery mobile。我在WordPress中构建了一个模板，并且每个页面都有一个全宽背景可以设置为不同的背景：Background_1.jpg = Home，Background_1.jpg = About，ens …. 这是前端加载的内容：所以我的问题如下：当我到达流体网格布局时，我想完全删除此元素以加快加载时间。我也不想隐藏它，我想在窗口大小小于600px时删除html。有没有人这样做过？

使用CSS的流体宽度菜单: 我有一个水平的CSS菜单。问题是当用户创建超过5个菜单项时，li标签移动到新行。我不希望这种情况发生。如何使其流动宽度如此，如果用户只创建3个菜单项，则每个标签的宽度增加，以使其适合全宽？ HTML： Test Test Test Test Test Test Test CSS： div.container { clear: both; margin: 10px auto 0; width:960px; border:1px solid red; height:700px; } div#new-menu-lower { border-radius: 3px 3px 3px 3px; border-top: 0 solid lightgrey; margin: 0 8px 10px; } #new-menu-lower ul { border: 1px solid white; display: block; height: 27px; } […]

流体布局底部的页脚: 我有一个流畅的布局，但结果是，当页面中没有足够的内容时，我的页脚会继续向上移动，如本例所示。保持页脚位于页面底部的流行解决方案是使用position: fixed或position: absolute ，但是，当我这样做时，内容可能会在resize时与页脚冲突（你可以在这里看到我的意思。尝试将窗口大小调整到文本隐藏在页脚后面的位置。那么我怎样才能在底部获得一个页脚，而是以流畅的布局相应地移动页面的其余部分？谢谢！

响应式砌体jQuery布局示例: 任何人都可以建议这个网站如何使用jQuery Masonry插件进行响应，流畅的布局？ Collective #2 特别; 浏览器resize的列数从3变为2，这是您对使用砌体的网站的期望，但有趣的是列也会resize以始终填充可用的整个宽度。我见过的大多数其他砌体网站都会在列的右侧留下间隙，因为列数会发生变化（例如http://masonry.desandro.com/ ）或者列填充整个宽度但列数保持不变（ http://masonry.desandro.com/demos/fluid.html ）。他们是否动态设置浏览器resize与CSS媒体查询相结合的列数，或者他们是否正在使用CSS3列？谢谢。