Komme_in_meinem_Tutorial_einfach_nicht_weiter._Bitte_um_Hilfe
Schaffe es einfach nicht, zwei Dreiergruppen zu konstruieren. Entweder zerschieße ich das Ganze
oder es geht irgendwie als 4. Feld darunter weiter.
https://jsfiddle.net/eddodtjn/
Hoffe ich habe es einigermaßen verständlich erklärt.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<link rel="stylesheet" href="/css_webseite/solid.css">
<link rel="stylesheet" href="/css_webseite/awesome.css">
<style>
body{
display:flex;
flex-direction:column;
}
#reihe{
margin-left:20%;
display:flex;
flex-direction:row;
width:100%;
}
.container{
width:33%;
display:flex;
}
.container div{
flex:4;
}
.container i{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
flex:1;
}
i{
font-size:30px;
}
</style>
</head>
<body>
<div id="reihe">
<div class="container">
<i class="fas fa-address-card"></i>
<div>
<h5>Mobile App Development</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
<div class="container">
<i class="fas fa-balance-scale"></i>
<div>
<h5>Animations</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
</div> <div id="reihe">
<div class="container">
<i class="fas fa-address-card"></i>
<div>
<h5>UI/UX</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
<div class="container">
<i class="fas fa-address-card"></i>
<div>
<h5>Mobile App Development</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div></div>
<div id="reihe">
<div class="container">
<i class="fas fa-balance-scale"></i>
<div>
<h5>Animations</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
<div class="container">
<i class="fas fa-address-card"></i>
<div>
<h5>UI/UX</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
</div>
</body>