 [CSS] grid ze stałymi i procentowymi szerokościami |
| [CSS] grid ze stałymi i procentowymi szerokościami |
 
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) 
 |
Mamy taki grid:
Kod <!DOCTYPE html> <html> <head> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <style> .w3-row div { height: 50px; } </style> </head> <body> <div class="w3-row"> <div class="w3-col l2 m4 s12 w3-green"> <div class="w3-col" style="width:60px"> <button>Tags</button> </div> <div class="w3-rest w3-orange"> Lorem </div> </div> <div class="w3-col l2 m8 s12 w3-red"> <div class="w3-row"> <div class="w3-col" style="width:60px">Autor: </div> <div class="w3-rest w3-orange">ipsum </div> </div> </div> <div class="w3-col l3 m5 s12 w3-red"> <div class="w3-row"> <div class="w3-col" style="width:100px">Kategorien: </div> <div class="w3-rest w3-orange">dolor </div> </div> </div> <div class="w3-col l5 m7 s12 w3-dark-grey"> <div class="w3-row"> <div class="w3-col" style="width:60px">Typen: </div> <div class="w3-rest w3-orange">sit </div> </div> </div> </div> </body> </html> https://codepen.io/rudolph-reti/pen/yLymNqj Na urządzeniach "small" wyświetlają się 4 wiersze po dwa divy. Divy: Tags, Autor, Kategorien, Typen mają stałe rozmiary podane w px. Pozostałe divy wypełniają automatycznie poszczególne wiersze do końca. Podobny efekt chciałbym osiągnąć na urządzeniach "medium" i "large", tzn.: Medium: pierwszy wiersz: div "ipsum" ma wypełniać wiersz do końca drugi wiersz: div "sit" ma wypełniać wiersz do końca pozostałe divy mają mieć stałe rozmiary Large: div "sit" ma wypełniać wiersz do końca, pozostałe divy mają mieć stałe rozmiary. Jak to zrobić najprościej? Da się to zrobić na tym W3 czy przesiąść się na coś innego? A może najlepiej zrobić to wszystko krok po kroku za pomocą media queries? Ten post edytował stellatus 2.02.2020, 14:05:55 |
 |
 
|
  |
|
Aktualny czas: 20.08.2025 - 04:55 |
