Tag: fluid layout

是否可以使用伪元素使包含元素环绕绝对定位的元素（如clearfix）？

我正在为我的网站制作一个轻量级的响应式jQuery滑块，并使用了非常常见的标记： HTML： CSS： #slider { width:80%; max-width:800px; margin:0 auto; } #slider ul { margin:0px; padding:0px; list-style:none; width:100%; } #slider ul li { width:100%; position:relative; } #slider img { width:100%; position:absolute; top:0px; box-shadow:0px 20px 40px rgba(0,0,0,.66); } #slider img.active { z-index:1; } 我遇到的问题是我的绝对定位幻灯片正在做他们应该做的事情并从页面结构中删除它们。 （这不是我希望他们做的，但它是堆叠它们的简单方法）。 我一直在阅读有关今天的CSS Pseudo-Elements以及人们正在使用它们的所有很酷的东西。 它让我想到……他们可以用来“清除”这些绝对定位的元素吗？ 我的想法是，可能有办法做以下事情： #slider img:before { content:””; display:block; position:static; } 显然需要更多的样式来实现这一点（因为它不会渲染我想要的东西……我知道此时你可能会想到“为什么不指定容器的高度并完成用它？“嗯，幻灯片的响应意味着当它们收缩时，容器的高度也会缩小。 […]

jQuery：流体同位素仅在resize后才起作用

我正在设置一个流体同位素网格有一些麻烦，一个简单的4列网格，每个.grid-block宽度为24％，留下1％的余量。 问题是，当页面加载时，它显示为3列网格，直到调整浏览器窗口大小并将其捕捉到4列。 这是一个jsfiddle演示： http ： //jsfiddle.net/BVzTV/4/ jQuery的： $(document).ready(function() { var $container = $(‘#main-grid’); $container.isotope({ itemSelector: ‘.grid-block’, animationEngine: ‘best-available’, resizable: false, masonry: { columnWidth: $container.width() / 4 } }); $(window).smartresize(function(){ $container.isotope({ // update columnWidth to a percentage of container width masonry: { columnWidth: $container.width() / 4 } }); }); }); 我无法弄清楚为什么会发生这种情况/如何解决它，它很简单我只是想在页面加载时实现一个简单的4列网格，并且当它被resize时。 任何建议将不胜感激！