Question

在此Fiddle，

<!DOCTYPE html>

<body>
<div class="test">
    <h1>?</h1>
    <p>This is a paragraph that offers more information about stuff, it can be accessed by hovering over the question mark. (Move your mouse away to shrink back.)</p>
</div>

<h1>Examples</h1>
<br />

<h3>My name is Shaun</h3>
<div class="test">
    <h1>?</h1>
    <p>People with this name tend to be passionate, compassionate, intuitive, romantic, and to have magnetic personalities. They are usually humanitarian, broadminded and generous, and tend to follow professions where they can serve humanity. Because they are so affectionate and giving, they may be imposed on. They are romantic and easily fall in love, but may be easily hurt and are sometimes quick-tempered.</p>
</div>
<h3>I am on a see food diet</h3>
<div class="test">
    <h1>?</h1>
    <p>when I see food, I want to eat it.</p>
    </div>

</body>

我想解决两个问题：

将鼠标悬停在问号上，您可以看到，当div扩展其中的文本时，不断重新格式化以适应div内部。我想要发生的是文本已经基于DIV完全展开时的正确尺寸。
如何动态选择DIV的大小，使其最大扩展大小是其中包含的文本的大小，我尝试了100％，但这只是使其成为网页的大小。

Answer 1

1）获取它以便在容器展开时文本不会重新定位，这要求您将paragraph元素的宽度设置为等于展开框的宽度：

.test:hover, .test p {
    width: 750px;
}

此外，您将p元素设置为display: inline;，必须将其更改为display: block;（尽管inline-block也可以使用），因为您无法使用明确设置inline元素的宽度。

演示：http://jsfiddle.net/UfhG2/6/

2）这有点棘手。如果没有脚本，您无法使用auto或height width来缩小其内容的大小，并且就I＆I而言＃39;我知道您无法轻松从指定的height或width转换为auto，但这里有一些建议：

http://n12v.com/css-transition-to-from-auto/

或者，作为一个简单的妥协，您可以设置：

.test:hover {
    height: auto;
}

这样，高度不会过渡，但你仍然会得到一个合理大小的盒子，宽度仍会很好地扩展。

演示：http://jsfiddle.net/UfhG2/8/

3）另外，您可能需要考虑使用pseudo-elements而不是重复<h1>?</h1>：

.test:before {
    content:'?';
    margin: 0;
    color: white;
    font-size: 2em;
    font-weight: bold;
}
.test:hover:before {
    display: none;
}

演示：http://jsfiddle.net/UfhG2/7/

修复动画扩展div内的内容布局

1 个答案: