Ankündigung

Einklappen
Keine Ankündigung bisher.

flexbox

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • flexbox

    Ich möchte gern genau 3 DIV-Container nebeneinander haben, die sich den äußeren Platz des Container-Div exakt teilen. Dabei möchte ich eine beliebige Anzahl von DIV-Boxen in den Container packen, ohne sowas wie 33% anzugeben.

    Schema als Text

    6 Boxen
    ###
    ###

    4 Boxen
    ###
    #


    ... ct.


    bitcoin.de <- Meine Freelancerwährung


  • #2
    Zitat von Alpha Beitrag anzeigen
    Ich möchte gern genau 3 DIV-Container nebeneinander haben, die sich den äußeren Platz des Container-Div exakt teilen. Dabei möchte ich eine beliebige Anzahl von DIV-Boxen in den Container packen, ohne sowas wie 33% anzugeben.
    Woran scheiterst du genau? https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox kennst du?

    Kommentar


    • #3
      HTML-Code:
      <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
      </div>
      CSS
      Code:
      .parent{
          display: flex;
          flex-wrap: wrap;
      }
      .child{
          flex: 0 0 33%;
          background-color: greenyellow;
          min-height: 1em;
      }
      .child:nth-child(even){
          background-color: green;
      }
      test23.jpg

      Kommentar


      • #4
        Zitat von Alpha Beitrag anzeigen
        ... ohne sowas wie 33% anzugeben.
        bitcoin.de <- Meine Freelancerwährung

        Kommentar


        • #5
          Zitat von tk1234 Beitrag anzeigen
          Woran scheiterst du genau? https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox kennst du?
          Ich frage selten einfache Dinge
          bitcoin.de <- Meine Freelancerwährung

          Kommentar


          • #6
            Code:
            .parent{}
            .child{
                float: left;
                width: calc(100% * 1/3);
                box-sizing: border-box;
                background-color: greenyellow;
                min-height: 1em;
            }
            .child:nth-child(even){
                background-color: green;
            }
            /*clearfix*/
            .parent:after {
              content: "";
              display: table;
              clear: both;
            }
            mehr fällt mir dazu nicht ein, oder anders gesagt, dann geht es evtl. auch gar nicht.

            Was stört dich denn daran, die Breite in % anzugeben?

            Kommentar


            • #7
              Zitat von protestix Beitrag anzeigen
              mehr fällt mir dazu nicht ein, oder anders gesagt, dann geht es evtl. auch gar nicht.

              Was stört dich denn daran, die Breite in % anzugeben?
              Hört sich nach Aufgabe an,
              div erst auf volle breite, dann mit transfom verkleinern;
              eben eine simple aufgabe ....

              Kommentar


              • #8
                Zitat von Alpha Beitrag anzeigen
                Ich frage selten einfache Dinge
                Etwas mehr Informationen wären schon hilfreich. Aber wenn du (bzw. der Aufgabensteller) keine 33% irgendwo haben möchtest kannst du natürlich auch Grid verwenden.

                Kommentar


                • #9
                  Ohne eine CSS-seitige Angabe der Breite (100% / 3 ist ja faktisch nichts anderes) ist das nur möglich wenn du auch immer nur 3 Elemente in einen Container packst: https://jsfiddle.net/st8d6pg5/. Ich halte diese Limitierung allerdings für unsinnig und auch dieses Konstrukt fliegt dir um die Ohren sobald du es mit Inhalten füllst.

                  Kommentar


                  • #10
                    Zitat von lottikarotti Beitrag anzeigen
                    Ohne eine CSS-seitige Angabe der Breite (100% / 3 ist ja faktisch nichts anderes) ist das nur möglich wenn du auch immer nur 3 Elemente in einen Container packst: […]
                    Nein, mit grid geht das auch ohne 33%, da muss man eben drei Spalten definieren (»grid-template-columns: auto auto auto;«) - ohne irgendeine Angabe geht das aber natürlich nicht, der Browser kann ja nicht ahnen dass es drei Elemente pro Zeile sein sollen. Und je drei Elemente nochmal in ein Element zu stecken ist - wie du ja schon richtig angemerkt hast - Unsinn.

                    Kommentar


                    • #11
                      Zitat von tk1234 Beitrag anzeigen
                      Nein, mit grid geht das auch ohne 33%, da muss man eben drei Spalten definieren
                      Eben. Ohne eine konkrete Angabe kann der Browser nicht wissen wie viele Elemente nebeneinander platziert werden sollen. Das trifft für CSS-Grids ebenso zu wie für flexbox.

                      Kommentar


                      • #12
                        html:
                        HTML-Code:
                        <div class='container'>
                        <div class='child'>test</div>
                        <div class='child'>test</div>
                        <div class='child'>test</div>
                        </div>
                        css:
                        Code:
                        .container{
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        }
                        was du da rein packst an containern ist egal

                        Kommentar


                        • #13
                          Zitat von Alpha Beitrag anzeigen
                          Dabei möchte ich eine beliebige Anzahl von DIV-Boxen in den Container packen, ohne sowas wie 33% anzugeben.
                          Rygel
                          Aufgabestellung ist nicht richtig umgesetzt.

                          Kommentar


                          • #14
                            Hm, was ist das denn für ein Thread? Kommt der TE denn hier noch mal mit einer Rückmeldung rüber? Ist das hier eine Knobelaufgabe für Entwickler oder hat das mit dem "ohne 33%" einen ernsthaften Grund?

                            Ich habe es übrigens nicht OHNE hingekriegt!
                            Es ist schon alles gesagt. Nur noch nicht von allen.

                            Kommentar

                            Lädt...
                            X