当 div 未扩展以适应其内容并且清除修复不起作用时该怎么办？

Question

我正在创建 "virtual business cards"，它可以让您简要了解一个人。当您单击它们时，它们会旋转并在卡片 "back" 上为您提供更深入的配置文件。

问题是我无法让卡片扩展（高度）以适应它们的内容。我已经尝试了所有我能找到的 "clear fix"，但到目前为止没有任何效果。我创建了一个 fiddle，检查一下，您就会明白我在说什么。

我怎样才能让最左边的卡片适合它的内容，并让另外两张卡片适合它的大小？

（我试图通过将所有卡片扩展到最大卡片的大小来保持所有卡片的大小相同）

更新：进展顺利！我发现这是因为parent是相对定位的，child是绝对定位的。

然而，这实际上是将卡的背面和正面放在一起的原因。因此，如果我相对定位子项，div 会扩展以适合其内容（万岁！）但是卡片的 "back" 会显示在卡片的 "front" 下方。（here秒fiddle告诉你我的意思）

关于如何克服这个问题有什么想法吗？

<style>

/* This styles the vCard container*/
.vCardContainer{
    display: inline-block;
    float: left;
    padding: 5px;
    margin: 10px;
    width: 200px;
    min-height: 250px;
    position: relative;
    perspective: 800px;
}   

/* This styles the vCard as a whole */
.vCard{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

/* Styles that apply to the front AND back of the vCard */
.vCard .vCardFront, 
.vCard .vCardBack{
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 5px;
    background: #939393;
}

/*Styles for the FRONT of the vCard*/
.vCard .vCardFront{
    border-top: 15px solid ;
}

/**
    Styles for the BACK of the vCard:
    (The back needs to start rotated)
*/
.vCard .vCardBack{
    transform: rotateY(180deg);
}


/* This flips the entire vCard */
.vCard.flipped{
    transform:rotateY(180deg);

}

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 555-555-5555</p>
            <p>Email: john.doe@gmail.com</p>
            <p>Street: 555 Main Street</p>
            <p>Unit Number: 33</p>
            <p>City: New York</p>
            <p>State: NY</p>
            <p>Zip: 55555</p>
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 270-331-0169</p>
            <p>Email: john.doe@gmail.com</p>
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 270-331-0169</p>
            <p>Email: john.doe@gmail.com</p>
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 270-331-0169</p>
            <p>Email: john.doe@gmail.com</p>
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 270-331-0169</p>
            <p>Email: john.doe@gmail.com</p>
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script>
jQuery(".vCard").click(function(){
    jQuery(this).toggleClass("flipped");
});

</script>

Answer 1

将此添加到您的
.vCard.vCardFront, .vCard.vCardBack

overflow-y: scroll;

Answer 2

如果你想使用更多的代码，你可以试试这个：

$(document).ready(function() 
{
     var objHeight = 0;
     var list = [];
  $('.vCardFront').each(function(i, obj) {
    objHeight = 0;
    $(this).children().each(function(i, obj) {
    objHeight += $(this).height();
});
    list.push(objHeight);
});
  var large = 0;
  for (var i = 0; i < list.length; i++) {
    if(large < list[i]){
      large = list[i];
    }
}
     $('.vCardContainer').height(large * 2);
});

document {
  display: none;
}
/* This styles the vCard container*/
.vCardContainer{
    display: inline-block;
    float: left;
    padding: 5px;
    margin: 10px;
    width: 200px;
    /*min-height: 250px;*/
    position: relative;
    perspective: 800px;
}   

/* This styles the vCard as a whole */
.vCard{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

/* Styles that apply to the front AND back of the vCard */
.vCard .vCardFront, 
.vCard .vCardBack{
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 5px;
    background: #939393;
}

/*Styles for the FRONT of the vCard*/
.vCard .vCardFront{
    border-top: 15px solid ;
}

/**
    Styles for the BACK of the vCard:
    (The back needs to start rotated)
*/
.vCard .vCardBack{
    transform: rotateY(180deg);
}


/* This flips the entire vCard */
.vCard.flipped{
    transform:rotateY(180deg);

}

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 555-555-5555</p>
            <p>Email: john.doe@gmail.com</p>
            
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 270-331-0169</p>
            <p>Email: john.doe@gmail.com</p>
          <p>Street: 555 Main Street</p>
            <p>Unit Number: 33</p>
            <p>City: New York</p>
            <p>State: NY</p>
            <p>Zip: 55555</p>
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 270-331-0169</p>
            <p>Email: john.doe@gmail.com</p>

          
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab">fsdfsdfsdfsdf</li>
                      <li class="tab">Units Bought: 4</li>
                        <li class="tab">fsdfsdfsdfsdf</li>
                      <li class="tab">Units Bought: 4</li>
                        <li class="tab">fsdfsdfsdfsdf</li>
                      <li class="tab">Units Bought: 4</li>
                        <li class="tab">fsdfsdfsdfsdf</li>
                    </ul>
            </ul>
        </div>
    </div>
</div>

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 270-331-0169</p>
            <p>Email: john.doe@gmail.com</p>
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>

<div class="vCardContainer">
    <div class="vCard">
        <div class='vCardFront'>
            <h3 class="leadName">John Doe</h3>
            <p>Phone: 270-331-0169</p>
            <p>Email: john.doe@gmail.com</p>
        </div>

        <div class='vCardBack hidden'>
            <h3 class="leadName">Info on John Doe</h3>
            <p>Sales:</p>
            <ul>
                <li class="tab">Naturals2Go</li>
                    <ul>
                        <li class="tab">Units Bought: 4</li>
                        <li class="tab"></li>
                    </ul>
            </ul>
        </div>
    </div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script>
jQuery(".vCard").click(function(){
    jQuery(this).toggleClass("flipped");
});

</script>

当 div 未扩展以适应其内容并且清除修复不起作用时该怎么办？

What to do when a div is not expanding to fit it's content, and clear-fixes don't work?

html

css

css-float