css - 当一个 div 没有扩展以适应它的内容时该怎么办，并且 clear-fixes 不起作用？

Question

我正在制作“虚拟名片”，让您简要了解一个人。当您单击它们时，它们会旋转并在卡片的“背面”为您提供更深入的轮廓。

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

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

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

更新:进步!我发现这是因为parent是相对定位的，child是绝对定位的。

然而，这实际上是将卡片的背面和正面放在一起的原因。因此，如果我相对定位子项，则 div 会扩展以适合其内容(万岁!)但是卡片的“背面”显示在卡片“正面”的下方。 (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

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

$(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>