Ich erstelle "virtuelle Visitenkarten", die Ihnen ein kurzes Profil einer Person geben. Wenn Sie darauf klicken, drehen sie sich und geben Ihnen ein tieferes Profil auf der "Rückseite" der Karte.Was tun, wenn ein Div nicht erweitert wird, um seinen Inhalt anzupassen, und Clear-Fixes nicht funktionieren?
Das Problem ist, dass ich die Karten nicht bekommen kann, um (Höhe) zu erweitern, um ihren Inhalt zu passen. Ich habe jede "klare Lösung" ausprobiert, die ich finden konnte und nichts hat bisher funktioniert. Ich habe eine fiddle erstellt, schau es dir an und du wirst genau sehen, wovon ich rede.
Wie kann ich die ganz linke Karte an ihren Inhalt anpassen und die anderen beiden an ihre Größe anpassen?
(Ich versuche, durch alle Karten die gleiche Größe zu halten, die sie an die Größe der größten Karte erweitern)
UPDATE: PROGRESS! Ich habe herausgefunden, dass dies liegt, weil das Elternteil relativ positioniert ist und das Kind absolut positioniert ist.
JEDOCH, das ist tatsächlich, was die Rückseite und Vorderseite der Karte zusammenbringt. Wenn ich also die Kinder relativ positioniere, erweitern sich die divs, um zu ihrem Inhalt zu passen (HOORAY!), Aber der "Rücken" der Karte zeigt sich unterhalb der "Vorderseite" der Karte. (here ist eine zweite Geige, um Ihnen zu zeigen, was ich meine)
Irgendwelche Ideen auf, wie man das überwindet?
<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: [email protected]</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: [email protected]</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: [email protected]</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: [email protected]</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: [email protected]</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>
Danke! Ich habe am Ende einige ziemlich einfache JS verwendet. (und Refactoring der HTML-Struktur.) –
Froh, dass Sie es herausfinden konnten. Der Versuch, den relativ positionierten Elternteil zur Höhe des absolut positionierten Kindes zu bringen, kann ein wenig schwierig sein. –