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.

Der hier verwendete Code

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!