|
|||
Responsive CSS Grid Layout
Ich habe eine Zzeile mit 4 Boxen
Wird das Fenster nun schmäler werden die boxen auch schmäler und brechen irgendwann um auf das mobile Layout. Dann werden diese alle in einer Spalteuntereinander dargestellt was sehr gut ist. Bevor die Spalten umbrechen werden sie allerdings zu schmall. Ich möchte das sie sagen wir mal eine Mindestbreite von 200px und erst dann umbrechen. Dann auch nicht gleich in eine Spalte mit allen 4 untereinadner, sondern erst in 2 Spalten und 2 Zeilen und erst päter in 1 Spalte mit 4 Zeilen. Daneben sollten die Boxen immer 1 und 2 Zeilen Layout immer die gleiche Höhe haben. Bricht der Text aufgrund der Breite in einer Box in eine Zeile mehr um ändert sich die Höhe de Box. Gleichzeitig sollten die anderen Boxen in der gleichen Zeile die Höhe auch ändern. Hat jemand eine Idee wie ich das hin bekomme? Achja, hier noch mein Quellcode: Code:
<div id="section-home-inner"> <article class="section1 one_fourth"> <div class="services-builder style1"> <div class="iconimage"> <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a> </div> <div class="iconmain"> <h3>Header</h3> <p>text text text text text text</p> <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p> </div> </div> <div class="services-builder style1"> <div class="iconimage"> <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a> </div> <div class="iconmain"> <h3>Header</h3> <p>text text text text text text</p> <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p> </div> </div> </article> <article class="section1 one_fourth"> <div class="services-builder style1"> <div class="iconimage"> <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a> </div> <div class="iconmain"> <h3>Header</h3> <p>text text text text text text</p> <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p> </div> </div> <div class="services-builder style1"> <div class="iconimage"> <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a> </div> <div class="iconmain"> <h3>Header</h3> <p>text text text text text text</p> <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p> </div> </div> </article> <article class="section1 one_fourth"> <div class="services-builder style1"> <div class="iconimage"> <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a> </div> <div class="iconmain"> <h3>Header</h3> <p>text text text text text text</p> <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p> </div> </div> <div class="services-builder style1"> <div class="iconimage"> <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a> </div> <div class="iconmain"> <h3>Header</h3> <p>text text text text text text</p> <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p> </div> </div> </article> <article class="section1 one_fourth"> <div class="services-builder style1"> <div class="iconimage"> <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a> </div> <div class="iconmain"> <h3>Header</h3> <p>text text text text text text</p> <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p> </div> </div> <div class="services-builder style1"> <div class="iconimage"> <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a> </div> <div class="iconmain"> <h3>Header</h3> <p>text text text text text text</p> <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p> </div> </div> </article> <div class="clearboth"> </div> Geändert von hatschiii (30.07.2019 um 18:16 Uhr) |
Sponsored Links |
|
|||
Deine Informationen sind leider sehr mager, ich kann meine Antwort aber nur an deinen Angaben ausrichten.
Vorweg: Dein HTML-Quelltext enthält viel zu viele unnötige Container, meist divs. Da kämpfe ich mich nicht durch. Die aktuellen HTML-Regeln besagen zudem, dass unnötige Container zu vermeiden sind. Außerdem soll der Quelltext möglichst schlank sein und keine überflüssigen Angaben enthalten. Dadurch bleibt er auch viel übersichtlicher. Das gilt zum Beispiel für class und id. Für dein Vorhaben ist nur eine einzige Klasse erforderlich. div-Elemente sollen nur noch verwendet werden, wenn es keine geeigneteren gibt. Für deinen Darstellungswunsch ist kein einziges div erforderlich. Ein aktueller HTML-Quelltext kann zum Beispiel folgendermaßen aufgebaut sein: Code:
<article class="cardlayout"> <section> <a href=""> <img src="http://lorempixel.com/600/300/transport/2" alt="Bildinfo"> </a> <h1>Header</h1> <p>text text text text text text</p> <a href="">Read More ></a> </section> <section> <a href=""> <img src="http://lorempixel.com/600/300/transport/5" alt="Bildinfo"> </a> <h1>Header</h1> <p>text text text text text text</p> <a href="">Read More ></a> </section> <section> <a href=""> <img src="http://lorempixel.com/600/300/transport/6" alt="Bildinfo"> </a> <h1>Header</h1> <p>text text text text text text</p> <a href="">Read More ></a> </section> <section> <a href=""> <img src="http://lorempixel.com/600/300/transport/8" alt="Bildinfo"> </a> <h1>Header</h1> <p>text text text text text text</p> <a href="">Read More ></a> </section> <section> <a href=""> <img src="http://lorempixel.com/600/300/city/7" alt="Bildinfo"> </a> <h1>Header</h1> <p>text text text text text text</p> <a href="">Read More ></a> </section> <section> <a href=""> <img src="http://lorempixel.com/600/300/city/9" alt="Bildinfo"> </a> <h1>Header</h1> <p>text text text text text text</p> <a href="">Read More ></a> </section> <section> <a href=""> <img src="http://lorempixel.com/600/300/nature/2" alt="Bildinfo"> </a> <h1>Header</h1> <p>text text text text text text</p> <a href="">Read More ></a> </section> <section> <a href=""> <img src="http://lorempixel.com/600/300/nature/5" alt="Bildinfo"> </a> <h1>Header</h1> <p>text text text text text text</p> <a href="">Read More ></a> </section> </article> Code:
@media all { .cardlayout { } .cardlayout section { background-color: hsla(360, 0%, 83%, 0.2); max-width: 600px; border: 1px solid grey; margin: 0.5rem auto 0.5rem auto; } .cardlayout img { min-width: 1px; display: block; max-width: 100%; border: 0px; } .cardlayout h1 { font-family: sans-serif; font-size: 1.8rem; text-align: center; margin: 1.5rem 1rem 1.5rem 1rem; } .cardlayout p { font-size: 1.5rem; text-align: center; margin: 1.5rem 1rem 1.5rem 1rem; } .cardlayout a { display: block; } .cardlayout a:last-child { color: lightskyblue; text-align: center; display: block; margin: 1.5rem 1rem 1.5rem 1rem; } } @media only screen and (min-width: 700px) { .cardlayout { display: flex; flex-wrap: wrap; } .cardlayout section { margin: 0.5rem 0.5rem 0.5rem 0.5rem; flex-grow: 0; flex-shrink: 0; flex-basis: calc(50% - 0rem - 2px - 1rem); } } @media only screen and (min-width: 1200px) { .cardlayout { display: flex; flex-wrap: wrap; } .cardlayout section { margin: 0.5rem 0.5rem 0.5rem 0.5rem; flex-grow: 0; flex-shrink: 0; flex-basis: calc(25% - 0rem - 2px - 1rem); } } Geändert von MrMurphy (31.07.2019 um 00:08 Uhr) |
Sponsored Links |
|
|||
Habe es jetzt mal eingefügt....
Ich möchte ja den TEaser max 260pxx breit damit 4 nebeneinander passen, ...irgendwas "blockt" da noch, auch wenn der CSS code mit 50% und 25% genau nach dem aussieht was ich will Geändert von hatschiii (31.07.2019 um 11:56 Uhr) |
|
|||
Ich habe es schon verhalten geschrieben:
Zitat:
Ersatzweise das KOMPLETTE HTML und CSS. Wobei Anfänger damit häufig überfordert sind. Ein Link zu der Seite ist deshalb besser und erspart Nachfragen unsererseits. Das Problem liegt in deinem restlichen Quelltext, den du uns bislang vorenthältst. Zitat:
Geändert von MrMurphy (31.07.2019 um 12:54 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Css 3 Seiten Layout will net so :) | nova_rs | CSS | 1 | 30.03.2010 16:54 |
Joomla und CSS Layout ohne Tabellen ... | MoYo | CSS | 2 | 15.02.2007 11:19 |
CSS Layout - ist das so möglich? | berlina | CSS | 18 | 12.02.2007 22:55 |
Layout: Tabelle -> CSS | ohne Schönheitsfehler? | Knickedi | CSS | 20 | 05.08.2006 03:18 |
CSS Layout mit abgerundeten Ecken | dimension | CSS | 3 | 17.04.2005 19:05 |