真正的CSS定位浮动

http://www.w3.org/TR/css3-exclusions/ 是什么，我需要和IE支持它可以很好地在http://ie.microsoft.com/testdrive/html5/positionedfloats/default.html 真正的CSS定位浮动

证明然而，没有其他的浏览器似乎支持了总结流属性。

如何在IE以外的浏览器上实现定位浮动？（其中“排除块”可以是在一个固定的位置，但是它周围的一切是在本质上是动态的。）

注我曾尝试的CSS“形状外”的属性：http://jsfiddle.net/ourk5mue/

-webkit-shape-outside: polygon(0px 280px, 100% 280px, 100% 500px, 0px 500px);

然而结果要么不可靠（由于正面禁用换行符（如chrome所示）），要么不支持（在Firefox上）。

它看起来像我将不得不使用javascript来手动重定位文档流中的DOM元素。这只能用CSS来完成吗？

来源

2015-01-09 user3338098

排除仍处于工作草案阶段，我相信，让他们的唯一方式，比如说浏览器将启用实验功能。 – 2015-01-09 20:08:01

结束了这样的事情：我执行一个函数，当周围的角度ng-repeat块改变或者窗口调整大小时，重定位目标块。

app.directive('onFinishRender', function ($timeout) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attr) { 
     if (scope.$last === true) { 
     $timeout(function() { 
      scope.$emit('ngRepeatFinished'); 
     }); 
     } 
    } 
    }; 
}); 


    var injectItem = function(ngRepeatFinishedEvent) { 
     if (typeof(ngRepeatFinishedEvent) !== "undefined") { 
     if (typeof(ngRepeatFinishedEvent.targetScope.item) === "undefined") {return;} 
     //other validation 
     } 
     var index = 2; 
     if (window.innerWidth < 1200) {index=1;} 
     if (window.innerWidth < 768) {index=0;} 
     var secondRow = jQuery('.items').eq(index); 
     var injectable = jQuery(".injectable").eq(0); 
     if (!secondRow.next().hasClass('injectable')) { 
     jQuery(".injectable:not(:first)").remove(); 
     secondRow.after(injectable.clone().css('display', 'block')); 
     } 
    }; 
    $scope.$on('ngRepeatFinished', injectItem); 
    window.addEventListener('resize', function() { 
     injectItem(); 
    }); 

<span class="injectable" style="display: none;">sorta fixed position blah</span> 
<span ng-repeat="item in items" on-finish-render class="item"> 
    surrounding blah 
</span>

这个答案是基于Calling a function when ng-repeat has finished

来源

2015-01-09 22:28:58 user3338098

真正的CSS定位浮动

回答

相关问题