basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Schaffe es einfach nicht, zwei Dreiergruppen zu konstruieren. Entweder zerschieße ich das Ganze oder es geht irgendwie als 4. Feld darunter weiter. <a href="https://jsfiddle.net/eddodtjn/">https://jsfiddle.net/eddodtjn/</a> Hoffe ich habe es einigermaßen verständlich erklärt.

    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>