1
Ich habe ein dreispaltiges Layout erstellt, aber trotz der Verwendung von display: flex auf dem Container werden die untergeordneten Elemente nicht automatisch die gleiche Höhe erhalten. Ich bin kein Flexbox-Experte, daher bemühe ich mich, das Problem zu identifizieren.Mit Flexbox konnte keine automatische Höhe erreicht werden
Hier ist mein Code:
.events-row {
display: flex;
}
.events-row .event-card:hover {
margin-top: -5px;
}
.events-row .event-card .event-card-img {
position: relative;
}
.events-row .event-card .event-card-img:hover {
opacity: 0.5;
}
.events-row .event-card .event-card-img img {
display: block;
width: 100%;
}
.events-row .event-card .event-card-img .series-caption {
position: absolute;
top: 0;
left: 0;
padding: 5px 10px;
font-size: 1.5em;
color: #fff;
background: #666;
}
.events-row .event-card .event-card-info {
padding: 15px;
text-align: left;
color: #666;
background: #eaeaea;
}
.events-row .event-card .event-card-info h1 {
font-size: 2.5em;
color: #000;
}
.events-row .event-card .event-card-info h2 {
font-size: 2em;
line-height: 1.5;
}
.events-row .event-card .event-card-info p {
padding: 15px 0;
font-size: 1.75em;
}
.events-row .event-card .event-card-info p a {
font-size: 1.1em;
}
.events-row .event-card .event-card-info .button-cont {
text-align: center;
}
.events-row .event-card .event-card-info .button-cont .button {
display: inline-block;
margin: 30px;
padding: 10px 30px;
font-size: 1.8em;
}<div class="events-row">
<div class="event-card">
<div class="event-card-img">
<a href="#">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
</a>
</div>
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
<a href="#">Learn More <span class="chevron right"></span></a>
</p>
<div class="button-cont">
<a class="button blue-button" href="#">Buy Tickets</a>
</div>
</div>
</div>
<div class="event-card">
<div class="event-card-img">
<a href="#">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
</a>
<div class="series-caption">Series title</div>
</div>
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
<a href="#">Learn More <span class="chevron right"></span></a>
</p>
</div>
</div>
<div class="event-card">
<div class="event-card-img">
<a href="#">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
</a>
<div class="series-caption">Series title</div>
</div>
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
<a href="#">Learn More <span class="chevron right"></span></a>
</p>
</div>
</div>
</div>Demo: http://codepen.io/ourcore/pen/gLKeLV.
Sie sind die gleiche Höhe für mich in Chrom. Das heißt, wenn Sie .button-cont unterhalb der ersten Spalte nicht einschließen. – sol
Mit Ausnahme der Kauf-Tickets unten und dem Schweben, es sieht alles gut für mich aus, können Sie genauer sein? – Brad
Nun, ohne die Taste wäre es die gleiche Höhe, ob ich Flexbox verwendet oder nicht, weil der Inhalt derselbe wäre. Ich versuche unabhängig vom Inhalt die gleiche Höhe zu erreichen. Also, ich möchte den Button hinzufügen. –