外部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宽度不匹配内部段落宽度

回答

相关问题