Mam problem. Jak ustawić blok z czterema zdjęciami które są obok drugiego zdjęcia. Panel z tymi zdjęciami jest niższy od tego zdjęcia obok. Próbowałem z table i table cell i nie działa
- paint.jpg (285 KB) - ściągnięć: 125
CSS 
HTML5 
HTML 
0
Po pierwsze - nie baw się w żadne tabelki, nie jesteśmy na początku lat 90-tych.
Po drugie - napisz proszę dokładniej, co chcesz uzyskać, bo szczerze mówiąc rzuciłeś jakieś 2 zdania, z których za wiele nie wynika :P
- Rejestracja:prawie 10 lat
- Ostatnio:ponad 4 lata
- Lokalizacja:Piwnica
- Postów:7697
0
Zapoznaj się z pojęciami rwd, grid, flexbox.
piotrek1998
rwd będę dopiero robić ale to na telefony. Na razie chce zrobić na komputery. Wykorzystuje float. Ucze się solidnych podstaw żeby potem łatwiej ogarnąć takie coś jak grid czy flexbox
Silv
@piotrek1998: RWD nie jest jedynie na telefony. To ogólna technika określania, w jaki sposób strona może dopasować się do rozmiaru ekranu czy rozmiaru obszaru wyświetlania (ang. viewport).
- Rejestracja:ponad 7 lat
- Ostatnio:3 dni
- Postów:639
0
Mam panel na którym są cztery zdjęcia (zresztą wrzuciłem zdjęcie w poście można pobrać) i obok niego mam zdjęcie na którym są przyciski. I po prostu panel z tymi czterema zdjęciami powinien mieć wysokość zdjęcia które jest obok tego panelu. Wrzuce zdjęcie jak to powinno wyglądać. Wyżej wrzuciłem jak to wygląda u mnie
- paint.jpg (323 KB) - ściągnięć: 85
- Rejestracja:ponad 10 lat
- Ostatnio:prawie 3 lata
- Lokalizacja:Warszawa
2
O coś takiego chodzi? https://jsfiddle.net/oahq6kvr/2/
UPDATE: Wkleję kod do posta, żeby innym łatwiej było przeglądać, jeśli kiedyś będą potrzebować i tu przypadkiem zajrzą:
HTML
<table class="sample-table">
<tr>
<td>
<div class="square--small"></div>
</td>
<td>
<div class="square--small"></div>
</td>
<td colspan="2" rowspan="2">
<div class="square--big"></div>
</td>
</tr>
<tr>
<td>
<div class="square--small"></div>
</td>
<td>
<div class="square--small"></div>
</td>
</tr>
</table>
CSS:
.sample-table {
background: orange;
}
.square--big {
background-color: blue;
height: 250px;
width: 250px;
}
.square--small {
background-color: red;
height: 100px;
width: 100px;
}
edytowany 2x, ostatnio: Silv
Zobacz pozostały 1 komentarz
@piotrek1998: osobiście nie stosowałbym tabel do układu elementów na całej stronie, ale – co kto woli, może akurat Tobie będzie to pasować.
Znaczy to co napisałeś nie jest złe. Spokojnie ja tego nie zrobiłem na tabeli tylko użyłem do tego elementu div. Mógłbym to zrobić na tabelach ale tak jak mówisz tak się nie robi. Chodzi mi mianowicie że wysokość panelu z tymi czterema zdjęciami podczas zmiany rozmiaru okna nie jest stała tylko się zmienia. Właśnie nie wie jak to zrobić żeby wysokość tego panelu pozostała niezmienna niezależnie od rozmiaru okna.
Yyy, ale zrozumiałem, że chodzi Ci o to, by wysokość była dopasowana do prawego panelu (czyli zmienna, bo wysokość prawego panelu jest zmienna, tak przynajmniej założyłem).
Nie bardzo rozumiem, co chciałbyś osiągnąć. W przypadku układu na tabelach zdjęcia będą "się rozjeżdżać" pionowo, w przypadku układu na gridzie/fleksie – mogą się rozjeżdżać, a mogą i nie.
No widzisz. I tu jest cały pies pogrzebany. Nie wiem bo dopiero się ucze czy wysokość tego panelu z tymi zdjęciami będzie się rozjeżdżać gdy się zmieni rozmiar okna. No bo jeżeli się da to jak to zrobić. No a jeżeli nie to trudno. Bo ja próbowałem zastosować table i table-cell ale nie działa
- Rejestracja:ponad 10 lat
- Ostatnio:prawie 3 lata
- Lokalizacja:Warszawa
2
Odpowiedź na komentarz: zrobiłem przykłady dla grida oraz flexboksa. HTML jest innych niż dla powyższych tabeli, ale wspólny dla grida i flexboksa.
HTML:
<div class="container">
<div class="square-container--small">
<div class="square--small"></div>
<div class="square--small"></div>
<div class="square--small"></div>
<div class="square--small"></div>
</div>
<div class="square-container--big">
<div class="square--big"></div>
</div>
</div>
CSS Grid
https://jsfiddle.net/p6c40m37/
Bez rozjeżdżania się pionowego (w poziomie elementy mogą się rozjeżdżać, ale to można łatwo zmienić, jeśli Ci przeszkadza).
CSS:
.container {
background-color: orange;
display: grid;
grid-template-rows: auto;
grid-template-columns: auto auto;
}
.square-container--small {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
align-content: start;
grid-row-gap: 10px;
}
.square--big {
background-color: blue;
height: 300px;
width: 300px;
}
.square--small {
background-color: red;
height: 100px;
width: 100px;
}
CSS Flexbox
https://jsfiddle.net/Lp9urj30/2/
Rozjeżdżanie, hm... zależy, co przez to rozumiesz; ja powiedziałbym, że nie ma.
CSS:
.container {
background-color: orange;
display: flex;
}
.square-container--small {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.square--big {
background-color: blue;
height: 300px;
width: 300px;
}
.square--small {
background-color: red;
height: 100px;
width: 100px;
margin: 10px;
}
edytowany 6x, ostatnio: Silv
Ok dzięki