css - 真正的 CSS 定位 float

Question

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

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

如何在 IE 以外的任何浏览器上实现定位 float ？ (“排除 block ”可以位于固定位置，但它周围的一切本质上都是动态的。)

注意我已经尝试了 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

最后做了这样的事情: 每当周围的 Angular ng-repeat block 发生变化或窗口调整大小时，我都会执行一个重新定位目标 block 的函数。

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