真正的 CSS 定位浮点数答案

【问题标题】：True CSS Positioned Float真正的 CSS 定位浮点数
【发布时间】：2015-03-08 05:30:36
【问题描述】：

http://www.w3.org/TR/css3-exclusions/ 是我需要的并且 IE 支持它，这可以在 http://ie.microsoft.com/testdrive/html5/positionedfloats/default.html 上很好地演示

但是似乎没有其他浏览器支持 wrap-flow 属性。

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

注意我已经尝试了 css "shape-outside" 属性：http://jsfiddle.net/ourk5mue/

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

但是结果要么不可靠（由于偶尔禁用换行（如在 chrome 上所见）），要么不受支持（在 firefox 上）。

看来我必须使用 javascript 在文档流中手动重新定位 DOM 元素。这只能用 CSS 完成吗？

【问题讨论】：

排除仍处于工作草案阶段，我相信在 Chrome 等中启用它们的唯一方法是启用实验性功能。

标签： css angularjs css-float css-position angularjs-ng-repeat

【解决方案1】：

最终做了这样的事情：每当周围的角度 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

【讨论】：