w00tw000t
Lt. Junior Grade
- Registriert
- Feb. 2011
- Beiträge
- 365
Hallo zusammen,
ich weiß nicht, ob das Arbeitszimmer, welches mittlerweile die 33°C Marke geknackt hat, im ursächlichen Zusammenhang mit dem nicht-lösen Können des Problems korreliert, hoffe aber, dass es genug kühle Köpfe da draußen gibt, die mir evtl. helfen können.
Folgendes Problem: Ich möchte die Höhe mehrerer DIV Container auf ein Level angleichen, sodass die weniger hohen DIV Container die gleiche Höhe haben wie die des höchsten DIVS.
Dazu habe ich eine super Seite gefunden, die mehrere Lösungswege aufzeigt: stackoverflow Leider hat kein Lösungvorschlag dort funktioniert. Ich vermute, dass hier auf die Höhe der Spalte (Column) geschaut wird und nicht auf die Höhe der DIVs in der Column.
Da ich aber nach dem gefühlt 100. Versuch es nicht geschafft habe, wende ich mich nun an Euch. Folgendermaßen sieht der Code aus:
Das ganze sieht dann mit den Bootstrap 4 CSS Dateien so aus:
Die Linien habe ich eingeblendet, damit das Problem besser zu erkennen ist. Diese drei farbigen Boxen sollen alle die gleiche Höhe haben. Die Spalte ansich hat die gleiche Höhe, aber die Divs darin nicht. Wie kann ich das Problem lösen?
Hier noch etwas CSS-Code:
Über jeden Hinweis würde ich mich freuen! Vielen Dank vorab 
ich weiß nicht, ob das Arbeitszimmer, welches mittlerweile die 33°C Marke geknackt hat, im ursächlichen Zusammenhang mit dem nicht-lösen Können des Problems korreliert, hoffe aber, dass es genug kühle Köpfe da draußen gibt, die mir evtl. helfen können.
Folgendes Problem: Ich möchte die Höhe mehrerer DIV Container auf ein Level angleichen, sodass die weniger hohen DIV Container die gleiche Höhe haben wie die des höchsten DIVS.
Dazu habe ich eine super Seite gefunden, die mehrere Lösungswege aufzeigt: stackoverflow Leider hat kein Lösungvorschlag dort funktioniert. Ich vermute, dass hier auf die Höhe der Spalte (Column) geschaut wird und nicht auf die Höhe der DIVs in der Column.
Da ich aber nach dem gefühlt 100. Versuch es nicht geschafft habe, wende ich mich nun an Euch. Folgendermaßen sieht der Code aus:
Code:
<main class="mt-5">
<div class="container">
<section id="services" class="text-center">
<div class="row">
<div class="col-12">
<nav class="landscape-nav">
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-test1-tab" data-toggle="tab" href="#nav-test1" role="tab" aria-controls="nav-test1" aria-selected="false"> Headline test1</a>
<a class="nav-item nav-link" id="nav-test2-tab" data-toggle="tab" href="#nav-test2" role="tab" aria-controls="nav-test2" aria-selected="true"> Headline test2</a>
<a class="nav-item nav-link" id="nav-test3-tab" data-toggle="tab" href="#nav-test3" role="tab" aria-controls="nav-test3" aria-selected="false"> Headline test3</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade active show" id="nav-test1" role="tabpanel" aria-labelledby="nav-test1-tab">
<div class="servicecontent">
<h4>Headline</h4>
<p>Text</p>
<div class="row tablecontainer">
<div class="col-lg-4 col-md-12 col-sm-12 servicetable">
<div class="item2">
<div class="classtitel">Headline</div>
<div class="classtext">
Headline
<ul>
<li>Content</li>
</ul>
Headline
<ul>
<li>Content</li>
</ul>
Headline
<ul>
<li>Content</li>
</ul>
Headline
<ul>
<li>Content</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 servicetable">
<div class="item">
<div class="classtitel">Headline</div>
<div class="classtext">
Headline
<ul>
<li>Content</li>
</ul>
Headline
<ul>
<li>Content</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 servicetable">
<div class="item2">
<div class="classtitel">Headline</div>
<div class="classtext">
Headline
<ul>
<li>Content</li>
</ul>
Headline
<ul>
<li>Content</li>
</ul>
</div>
</div>
</div>
</div>
<p>Text</p>
</div>
</div>
<div class="tab-pane fade" id="nav-test2" role="tabpanel" aria-labelledby="nav-test2-tab">
<div class="servicecontent">
<h4>Headline</h4>
<div class="row">
<div class="col-md-6 col-sm-12 ">
<p>Text</p>
</div>
<div class="col-md-6 col-sm-12 ">
<ul>
<li>Content</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-test3" role="tabpanel" aria-labelledby="nav-test3-tab">
<div class="servicecontent">
<h4>Headline</h4>
<p>Text</p>
<div class="row tablecontainer">
<div class="col-lg-6 col-md-12 col-sm-12 servicetable">
<div class="item2">
<div class="classtitel">Headline</div>
<div class="classtext">
<ul>
<li>Content</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 servicetable">
<div class="item">
<div class="classtitel">Headline</div>
<div class="classtext">
<ul>
<li>Content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</main>Die Linien habe ich eingeblendet, damit das Problem besser zu erkennen ist. Diese drei farbigen Boxen sollen alle die gleiche Höhe haben. Die Spalte ansich hat die gleiche Höhe, aber die Divs darin nicht. Wie kann ich das Problem lösen?
Hier noch etwas CSS-Code:
Code:
.item {
padding: 10px;
border: 1px solid rgba(245,222,179,0.5);
background-color: rgba(245,222,179,0.5);
}
.item2 {
padding: 10px;
border: 1px solid rgba(232,223,221,0.5);
background-color: rgba(232,223,221,0.5);
}
.tablecontainer {
display: flex;
margin-top: 3%;
}
.servicetable{
margin-bottom: 4%;
border: 2px solid;
}
.classtitel{
font-family: 'High Summit';
font-size: 30px;
text-align: center;
margin-top: 20px;
}
.classtext{
margin-top: 20px;
text-align: left;
}
