1
Ich habe mehrere Boxen (nur eine im Code-Snippet), die unterschiedliche Mengen an Inhalt in jeder Box haben, ich will sie automatisch die Größe an den Inhalt anzupassen. Im Moment überspringt der Inhalt und ist nicht in der Box enthalten. Ich habe Überlauf benutzt: versteckt; aber das scheint nicht geholfen zu haben.Inhalt außerhalb seiner div
Dank
#leadership_elections_timeline {
background-color: rgba(92, 177, 255, 0.4);
padding: 0 10%;
position: relative;
display: block;
}
#leadership_elections_timeline .timeline_divider {
width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
width: 150px;
height: 90px;
border-right: 2px solid #000;
box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
width: 100%;
position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
width: 150px;
height: 185px;
float: left;
position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
background-color: #fff;
border: 6px solid #000;
width: 23px;
height: 23px;
border-radius: 50%;
position: absolute;
top: 30px;
right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
padding: 5px;
border-top: 2px dashed #c62428;
color: #000;
position: absolute;
top: 41px;
right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
overflow: hidden;
border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
width: 93%;
background-color: #fff;
margin: 0 auto;
border-radius: 15px;
max-height: 165px;
margin-bottom: 20px;
position: relative;
box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
content: '';
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #fff;
position: absolute;
left: -15px;
top: 26px;
}<div id="leadership_elections_timeline">
\t <div class="timeline_divider"><div></div></div>
\t <div class="timeline_object">
\t \t <div class="elections_timeline_left">
\t \t \t <div class="date_circle"></div>
\t \t \t <p>17 Jan 2017</p>
\t \t </div>
\t \t <div class="elections_timeline_right">
\t \t \t <div class="elections_timeline_info">
\t \t \t \t <div class="timeline_details">
\t \t \t \t \t <h3>Nominations are now open!</h3>
\t \t \t \t \t <p>Take our quiz to see which role you'd be best suited to.</p>
\t \t \t \t \t <a href="/representation/elections" class="goButton">Nominate Yourself</a>
\t \t \t \t \t <p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
\t \t \t \t \t <a href="/representation/elections" class="goButton">Nominate a friend</a>
\t \t \t \t </div> \t \t \t \t
\t \t \t </div>
\t \t </div>
\t </div>
</div>