javascript - 消息框大小应取决于 jQuery 中的消息大小

Question

我想让 div 元素根据 <span id="dykSelectedReadMore"> 中的文本大小更改其大小.

<div class="flipper-back">

<a href="#" class="js-flipper-flip flipper-close"></a>
<div class="pad-box">
    <h3 class="colored">Did you know</h3>
    <div class="pad-30-0-0">
        <b><span id="dykSelectedIssue">som text</span></b>
        <br><br>
        <span id="dykSelectedReadMore">...e-identities by 2025.  Estonia introduced e-residency in 2014. Non-residents can get ID certificates with the functionality of Estonian ID card. This allows them to start using Estonian digital services from anywhere on Earth. E-residency is attracting entrepreneurs needing an investment account in the European Union, and is bringing more customers to Estonian companies and more capital into the country's economy.</span>
    </div>
</div>

Answer 1

我认为您不应该使用 Javascript，而应使用 CSS。当div 包含 float 元素时，会出现这种问题，无法计算其正确的高度(因为没有考虑那些元素的高度)。

按照最简单最快的方法解决。

开始添加这段 CSS 代码:

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

(来源 CSS-Tricks)

然后将该类应用于 flipper-back div 或 pad-box .取决于女巫<div>包含 float 元素。

例如。 <div class="flipper-back clearfix">