固定内容的布局在动画扩展div

在这个小提琴上，

<!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%，但这只是使它的网页的大小。

1)要使文本在容器展开时不会重新定位，需要将段落元素的宽度设置为展开框的宽度:

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

此外，您将p元素设置为display: inline;，必须更改为display: block;(尽管inline-block也可以工作)，因为您不能显式设置inline元素的宽度。

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

2)这有点棘手。没有脚本，你不能让一个元素缩小到它的内容的大小，而不使用auto的height或width，据我所知，你不能轻易地从指定的height或width过渡到auto，但这里有一些建议:

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

或者，作为一种简单的折衷方法，您可以设置:

.test:hover {
    height: auto;
}

因此，高度不会发生过渡，但你仍然会得到一个合理大小的框，宽度仍然会很好地扩展。

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

3)此外，您可能想要考虑使用伪元素而不是重复<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/

相关内容

最新更新

热门标签：