div寬度過渡，使第二個div使用剩餘的水平空間

我有三個div佔據了水平空間的三分之一。當我懸停在其中的一個上面時，它轉換到水平空間的三分之二。當我將鼠標懸停在該div上時，我希望剩下的兩個div分別縮小到六分之一。所以基本上我希望它們填充第一個div擴展時留下的任何水平空間。div寬度過渡，使第二個div使用剩餘的水平空間

像這樣：
[--- --- DIV1] [--- --- DIV2] [--- --- DIV3]上懸停
：
[------ --- div1 ---------] [div2] [div3]

這是可能的與CSS？

非常感謝！

來源

2014-02-25 kylmark

一些HTML，CSS未遂？詢問代碼的問題必須證明對所解決問題的最小理解。包括嘗試解決方案，爲什麼他們沒有工作，以及預期的結果。 –

對於一個過渡，我認爲你需要使用花車如下：

JSFiddle

HTML

CSS

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

figure { 
    margin: 0; 
    overflow:hidden; 
} 

figure div { 
    float:left; 
    width:33%; 
    border:1px solid red; 
    transition: width 0.5s ease; 
} 

figure:hover div { 
    width:16.5%; 
} 

figure div:hover { 
    width: 66.66%;

}

來源

2014-02-25 11:17:38

是的，這是拼圖的最後一塊！你讓我今天一整天都感覺很好！ :) – kylmark

您可以用table顯示實現這一目標：

<figure> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</figure>

figure { 
    display: table; 
    margin: 0; 
    table-layout: fixed; 
    width: 100%; 
} 

figure div { 
    display: table-cell; 
} 

figure div:hover { 
    width: 66.66%; 
}

JSFiddle demo。

這裏固定的table-layout屬性確保所有的單元格寬度相同;因爲我們有3列，在懸停時指定寬度爲66.66％（4/6）意味着我們的另外兩個div元素縮小到16.66％的寬度 - 1/6。

來源

2014-02-25 11:03:46

，工作非常完美！非常感謝！ – kylmark

它過渡了嗎？我無法得到這個工作，但也許我錯過了一些東西。 –

阿哈...破解它：http://jsfiddle.net/8kaqE/3/ –

div寬度過渡，使第二個div使用剩餘的水平空間

回答

相關問題