Question

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完成吗？

Answer 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

真正的CSS定位浮点数

1 个答案: