1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Darstellungs problem mit div bei verschidenen fenster grössen

Dieses Thema im Forum "CSS" wurde erstellt von Andrin Spitzer, 10. Januar 2017 um 21:26 Uhr.

  1. Andrin Spitzer

    Andrin Spitzer Mitglied

    Guten Abend zusammen.

    Ich hab mal wider ein CSS Problem, ich bin zur zeit an einer Seite dran wo ich einen div=id=content habe mit mehreren div's=class=box drinnen.

    Jetzt ist es so das ich will das sich wen das Fenster den ganzen Bildschirm füllt sollen zb 4 von den div=class=box neben einander sein alle gleich breit und die gleichen zwischen Abständen und so zentriert, wen das Fenster jetzt zb halbiert wird sollen es nur noch 2 sein und dafür in der nächsten reihe wider 2.



    Ich wusste nicht wo nach ich suchen sollte darum hab ich direkt mal ein Thema erstellt ich Hofe ihr versteht mein Problem und könnt mir helfen.


    Liebe grüsse


    A.Spitzer
     
  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Ich würde die divs mit display:inline-block versehen und ihnen eine Breite von 25% geben. Dann passen genau vier in den umgebenden Container. Dann mit einer Mediaquery die Breite auf 50% ändern, wenn eine bestimmte Fensterbreite unterschritten wird. Dann passen nur noch zwei hinein.
    https://jsfiddle.net/pnpotchk/
    Du musst darauf achten, dass zwischen dem schließenden und dem öffnenden div-Tag kein Zeilenumbruch ist:
    Code (Text):
    1. </div><div>
     
    Zuletzt bearbeitet: 10. Januar 2017 um 23:44 Uhr
  3. Andrin Spitzer

    Andrin Spitzer Mitglied

    Hay danke für die schnelle antwort. das aklappt bereits sehr gut aller dings will ich mit margin einen abstand zwischen den boxen schaffen dieser ist aber leider nicht regel mässig wen das fenster kleiner/grösser wirt.

    hab das geändert:
    Code (CSS):
    1. .box {
    2.     display: inline-block;
    3.     width: 24%;
    4.     margin:0.25%;
    5.     height: 50vh;
    6.     background-color: lightgrey;
    7. }
    und was passirt wen ich immer wider eine box mit der selben class hinzufüge passt sich das dan automatisch an?

    liebe grüsse..
     
  4. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Meinst Du es so?
    https://jsfiddle.net/Sempervivum/pnpotchk/3/
    Wenn man das margin in % angibt, verändert es sich je nach Fenstergröße.
    Probiere es aus. Wenn man die Größenangaben nicht verändert, passen weiterhin vier divs in eine Zeile und die nächsten werden in einer neuen Zeile angezeigt:
    https://jsfiddle.net/Sempervivum/pnpotchk/4/
     
  5. Andrin Spitzer

    Andrin Spitzer Mitglied

    hat das klappt bereits super gut danke schön. muss nur noch den Fehler finden warum bei mir die Abstände nicht überein stimmen (vom div links div bis zur linken Seite mit dem rechten div zur rechten Seite)

    aber das liegt glaube ich an dem div wo sich das ganze befindet.


    ich melde mich mich wen es funktioniert.
     
  6. Andrin Spitzer

    Andrin Spitzer Mitglied

    hmmm bring es irgend wie nicht hin....

    vlt siehst du das Problem.

    HTML:
    1. <div class="content">
    2.     <div class="shop-box">
    3.     </div><div class="shop-box">
    4.     </div><div class="shop-box">
    5.     </div><div class="shop-box">
    6.     </div><div class="shop-box">
    7.     </div>
    8. </div>
    Code (CSS):
    1. .shop-box {
    2.     display: inline-block;
    3.     margin: 0.25%;
    4.     width: 24.5%;
    5.     padding:                20px;
    6.     border:                 1px solid  rgba(84, 44, 44, 0.2);
    7.     -webkit-box-shadow:     0px 0px 3px -1px rgba(0, 0, 0, 0.5);
    8.     -moz-box-shadow:        0px 0px 3px -1px rgba(0, 0, 0, 0.5);
    9.     box-shadow:             0px 0px 3px -1px rgba(0, 0, 0, 0.5);
    10. }
    11.  
    12. @media only screen and (max-width: 500px) {
    13.     .shop-box {
    14.         width: 49.5%;
    15.     }
    16.  
    17.  
    18.  
    19. .content {
    20.     position:               absolute;
    21.     left:                   28.3%;
    22.     right:                  28.3%;
    23.     top:                    57px;
    24.     height:                 auto;
    25.     min-height:             10em;
    26.     font-size:              1em;
    27. }
    28. }
     
  7. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Wenn Du ein padding und ein border anbringst, musst Du diese in die Berechnung einbeziehen:
    https://jsfiddle.net/Sempervivum/b0pjrst2/
    Möglicher Weise geht dies einfacher mit flex-Layout, ohne Berechnungen, aber damit habe ich mich bisher noch nicht beschäftigt.
     
  8. Andrin Spitzer

    Andrin Spitzer Mitglied

    Hay klappt super danköööö viel mal.
     
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Freut mich, dass es funktioniert. Würde mich aber interessieren, ob es mit flex-Layout einfacher, ohne die Berechnungen, geht. Vielleicht kann jemand etwas dazu sagen, der das Wissen hat.
     
Die Seite wird geladen...
Ähnliche Themen - Darstellungs problem verschidenen
  1. TIMS_Ralf
    Antworten:
    4
    Aufrufe:
    146
  2. Alice
    Antworten:
    11
    Aufrufe:
    1.562
  3. holger_buns
    Antworten:
    6
    Aufrufe:
    587
  4. PowerCheat
    Antworten:
    6
    Aufrufe:
    569
  5. Rexo
    Antworten:
    4
    Aufrufe:
    885