外部div寬度不匹配內部段落寬度

我正在嘗試使div根據其內部<p>元素寬度展開或收縮。外部的div包含其中兩個，它的寬度設置爲max-width屬性，所以我可以在重新調整其寬度時進行CSS轉換。外部div寬度不匹配內部段落寬度

在懸停兄弟div時，第一個內部p元素設置爲消失，而第二個元素顯示爲較小。然而外面的div一直縮小到它的最小寬度，而不是內部段落。

以下JSFiddle總結了一切。將鼠標懸停在藍色框上以查看發生了什麼：http://jsfiddle.net/cq18567u/

是否存在僅CSS的解決方案？

2014-10-31 itsqualtime

您的代碼無法正常工作的主要原因是因爲您使用position: absolute作爲#textprev，使其退出當前元素流程，所以您需要刪除position: absolute。這將使width到正確的一個，但它會看起來像它不存在，因爲默認<p>是block element，所以它將在新行，但因爲您設置height爲#text1，並使用overflow: hidden ，它不能被看到。

你需要使它的工作是改變style您paragraph，與您現有的HTML

<div id="prev"></div> 
<div id="text1"> 
    <p id="textup" class="side">Before hovering (1st paragraph)</p> 
    <p id="textprev" class="side">After (2nd paragraph)</p> 
</div>

和修改CSS到

#prev { 
    position: relative; 
    float: right; 
    background: blue; 
    width:50px; 
    height:50px; 
} 
#prev:hover ~#text1 #textup { 
    max-width: 0px; 
    opacity: 0; 
    visibility: hidden; 
    transition: all ease-in-out .5s; 
} 
#prev:hover ~#text1 #textprev { 
    max-width: 200px; 
    opacity: 1; 
    visibility: visible; 
    transition: all .5s ease-in-out .5s; 
} 
#text1 { 
    position: relative; 
    float: right; 
    height: 50px; 
    max-width: 500px; 
    background: grey; 
    overflow: hidden; 
} 
#textup { 
    visibility: visible; 
    background: red; 
    opacity:1; 
    max-width:500px; 
    transition: all .5s ease-in-out .5s; 
} 
#textprev { 
    visibility: hidden; 
    max-width:0px; 
    background: green; 
    opacity:0; 
    transition: all ease-in-out .5s; 
} 
.side { 
    text-overflow: clip; 
    white-space: nowrap; 
    overflow: hidden; 
    color: white; 
    display:inline-block; 
}

更改paragraph與.side類是一個inline-block元素，這將使它出現在同一行中，如果有空間的話。然後，還需要設置max-width爲#textup上normal和hover狀態，所以transition可以工作（如果你申報max-width只在一個國家將無法正常工作），那麼就normal和不同的過渡hover狀態一個delay，所以width不奇怪的方式改變。（上normal和hover狀態移除#textup和#textprev的transition，然後在.side添加transition: all ease-in-out .5s;看看我通過改變width的不可思議的方式平均）

下面是一個Updated Fiddle來看看它是如何工作的。

來源

2014-10-31 05:09:53 Kyojimaru

去，因爲它是先幫我瞭解的問題是接受這一個。漂亮的修復，謝謝。 – itsqualtime 2014-10-31 06:21:19

而且是可行的，而不inline-block通過改變第一款的懸停高度，這也使得一個奇特的效果：jsfiddle DEMO

來源

2014-10-31 05:19:56 lapin

我試圖改變你的代碼，但我無法實現具有切換兩段之間的過渡效果。我從演示中刪除了一些複雜的css代碼，只是實現了基本的需求而沒有轉換。

這裏是我的代碼叉你：http://jsfiddle.net/abruzzi/cq18567u/7/ 主要更改如下：

#prev:hover~#text1 #textup{ 
    max-width: 0; 
    display: none; } 
#prev:hover~#text1 #textprev{ 
    display: block; }

來源

2014-10-31 05:20:54 Abruzzi

的問題是，你有一個塊元素（p標籤）與position: absolute另一個塊元素中（一div）。當一個內部元素具有position: absolute這意味着外部元素不再'包含'它，因此它不會自然地包裹在內部元素周圍。我試着將#textprev（第二個 - 爲什麼有兩個？）的CSS切換到position: absolute，然後移動它。例如

#textprev { 
    postion: relative; 
    top: -50px; /* to compensate for the height of your '#prev' div */ 
}

然後動畫的問題，如Kyojimaru提到的，只是你需要它的hover僞元素對正常#textup元素兩者以及設置max-width。

這裏的另一個JSFiddle

來源

2014-10-31 05:27:32 bowheart

外部div寬度不匹配內部段落寬度

回答

相關問題