Cześć, mam takie zagadnienie do rozwiązania: mam kilkanaście jednakowych divów, każdy z nich ma ustawiony parametr "min-width". Chciałbym w obrębie ekranu zmieścić jak najwięcej elementów (najlepiej wszystkie), ale w taki sposób, żeby były one jak największe. Natomiast przy zmniejszaniu okna przeglądarki chciałbym aby elementy zmniejszały się aż do osiągnięcia min-width - wtedy jeśli już nie ma wyjścia, żeby wszystkie elementy zmieściły się na ekranie mogą wyjść poza obszar, przy jednoczesnym pojawieniu się scrolla. Nie mam za bardzo pomysłu jak można to zrobić? Ktoś podpowie? Spotkaliście się już może z czymś takim?
HTML 
CSS 
- Rejestracja:ponad 6 lat
- Ostatnio:6 dni
- Lokalizacja:Silesia/Marki
- Postów:5505
0
W sensie te divy to są kolumny obok siebie? a jak ustawisz width na odpowiedni procent to nie zadziała? Ewentualnie media query i dwa style. Dla większego niż wartość graniczna wpisujesz procenty. Dla mniejszego niż wartość wpisujesz wartość (piksele emy, remy) na sztywno
- Rejestracja:prawie 6 lat
- Ostatnio:ponad 3 lata
- Postów:141
0
KamilAdam napisał(a):
W sensie te divy to są kolumny obok siebie? a jak ustawisz width na odpowiedni procent to nie zadziała? Ewentualnie
media queryi dwa style. Dla większego niż wartość graniczna wpisujesz procenty. Dla mniejszego niż wartość wpisujesz wartość (pikseleemy,remy) na sztywno
Prostokąty poukładane obok siebie.
- Rejestracja:ponad 6 lat
- Ostatnio:6 dni
- Lokalizacja:Silesia/Marki
- Postów:5505
0
To już nie ma tak prosto bo musisz ustawić wysokość i szerokość. Zwykle za pomocą media query ustawia się style dla kilku najczęściej występujących szerokości ekranu. Np Degustująca Istota jest ustawiona dla szerokości 1200px, 992px, 768px i 576px.
- Rejestracja:prawie 6 lat
- Ostatnio:ponad 3 lata
- Postów:141
0
KamilAdam napisał(a):
To już nie ma tak prosto bo musisz ustawić wysokość i szerokość. Zwykle za pomocą media query ustawia się style dla kilku najczęściej występujących szerokości ekranu. Np Degustująca Istota jest ustawiona dla szerokości 1200px, 992px, 768px i 576px.
No podejrzewam, że nie jest łatwo. Tylko pytam o jakieś ogólne podejście, bo trochę próbowałem, ale do niczego ciekawego nie doszedłem.
- Rejestracja:około 10 lat
- Ostatnio:około 2 lata
- Lokalizacja:Chorzów
- Postów:1670
0
Może głupia propozycja ale jeśli dobrze zrozumiałem to co chcesz osiągnąć to powiem, że tabela tak się zachowuje sama z siebie.
Nawet jak dasz jej width:100% to jeśli jej komórki się nie będą mieścić to tabela wyjdzie za ekran ...
Teraz skoro wiemy, że da się to zrobić w tabeli to odpowiednią kombinacją display:table-cell czy czymś takim powinno się udać uzyskać to samo na samych DIV'ach.
https://jsfiddle.net/ba0f3qgd/
<html>
<body>
<style>
.komorka{
min-width:250px;
border:solid 1px #666;
}
</style>
<table style='width:100%'>
<tr>
<td class='komorka'>A</td>
<td class='komorka'>B</td>
<td class='komorka'>C</td>
<td class='komorka'>D</td>
</td>
</table>
</body>
</html>
edytowany 4x, ostatnio: katakrowa
- Rejestracja:prawie 7 lat
- Ostatnio:ponad 3 lata
- Postów:3394
2
Dla kontenera:
display:flex;
flex-wrap: wrap;
Dla DIV-ów:
flex:1 1 123px; /* czy lile masz tam w min-widht */
- Rejestracja:prawie 6 lat
- Ostatnio:ponad 3 lata
- Postów:141
0
katakrowa napisał(a):
Może głupia propozycja ale jeśli dobrze zrozumiałem to co chcesz osiągnąć to powiem, że tabela tak się zachowuje sama z siebie.
Nawet jak dasz jej width:100% to jeśli jej komórki się nie będą mieścić to tabela wyjdzie za ekran ...
Teraz skoro wiemy, że da się to zrobić w tabeli to odpowiednią kombinacją display:table-cell czy czymś takim powinno się udać uzyskać to samo na samych DIV'ach.https://jsfiddle.net/ba0f3qgd/
<html> <body> <style> .komorka{ min-width:250px; border:solid 1px #666; } </style> <table style='width:100%'> <tr> <td class='komorka'>A</td> <td class='komorka'>B</td> <td class='komorka'>C</td> <td class='komorka'>D</td> </td> </table> </body> </html>
No nie do końca mi o to chodziło - one muszą się mieścić w ekranie, a nie wychodzić poza. Mówiąc o scrollu myślałem o tym góra-dół, ale nie tym lewo-prawo.
katakrowa