真正的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定位浮動

回答

相關問題