使元素自動適合家長沒有W/O表的寬度/ javascript

是否有可能創建一個div，其中包含多個自動適應父級大小（均勻分佈）的框，而無需使用表或Javascript？我意識到這可能與table-layout:fixed;，但我試圖動畫，它似乎並沒有很好地工作。下面的圖片是什麼，我的意思是一個例子：使元素自動適合家長沒有W/O表的寬度/ javascript

A gif showing autosizing boxes

我試圖增加一個框格內的寬度，然後將區分箱子的其餘部分自動調整大小，因此所有的箱子均勻地適合div。我需要它的動畫，而不是即時在這種情況下，我只會使用一張桌子。我也嘗試過使用Javascript，用-webkit-transition對它進行動畫處理，但這並沒有變成非常好的動畫效果。盒子的大小不是擴大/縮小，而是從0px開始，然後延伸到給定的大小。（這是用一個表table-layout:fixed。有一個純CSS/HTML的方式來做到這一點呢，還是需要使用Javascript和/或表？

來源

2013-02-28 daviga404

+1的很能說明問題，它的+實際上是一個很好的問題。 – andlrc 2013-02-28 16:22:00

使用固定數量的孩子很可能不表（雖然你需要表顯示），這裏是我使用的CSS：

.parent{width:400px;height:100px;display:table} 

.parent div{display:table-cell;border:1px solid #000; 
    -webkit-transition:width 1s;width:20%} 

.parent:hover div{width:10%} 
.parent div:hover{width:60%}

您需要手動計算動畫中的最好成績的百分比。演示：

http://jsbin.com/ubucod/1

來源

2013-02-28 16:51:03 David

謝謝！這完美地工作，一個非常簡單和容易的解決方案。 – daviga404 2013-02-28 17:02:53

如果你想的箱子動畫上一個點擊/觸摸，然後你需要使用Javascript

如果你希望盒子只在滾動時動起來，那麼你可以將css應用到父元素來將所有盒子默認設置爲相同的百分比，並在翻轉時對其進行更改

該解決方案只適用於固定數量的盒子，但是。

#Container .box{ 
     width: 20%; 
     transition: width 0.2s;    
    } 
    #Container:hover .box{ 
     width: 10%; 
    } 
    .box:hover{ 
     width: 60%; 
    }

我還沒有測試過，但它應該的工作。

來源

2013-02-28 16:37:26

HTML：

<div class="pushercolumn"></div> 
<div class="pushedcolumn"> 
    <div class="unit"></div> 
    <div class="unit"></div> 
    <div class="unit"></div> 
    <div class="unit"></div> 
</div>

CSS：

.pushercolumn { 
    float: left; 
    width: 30%; /*or whichever you want*/ 
} 

.pushedcolumn { 
    overflow: hidden; /* guarantees the .pushedcolumn is pushed horizontally by the floats */ 
    font-size: 0; /* removes white-space. choose your preferred method*/ 
} 

.unit { 
    display: inline-block; 
    width: 25%; /* assuming there are 4 boxes in the right column. this is the only variable you have to update based on the circumstances */ 
}

http://jsfiddle.net/joplomacedo/xYAdR/

來源

2013-02-28 17:01:11 banzomaikaka

使元素自動適合家長沒有W/O表的寬度/ javascript

回答

相關問題