Wyrównanie bloków

Odpowiedz Nowy wątek
2019-04-12 15:52
0

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

Pozostało 580 znaków

2019-04-12 16:11
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


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say

Pozostało 580 znaków

2019-04-12 16:18
0

Zapoznaj się z pojęciami rwd, grid, flexbox.


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 - piotrek1998 2019-04-12 17:31
@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). - Silv 2019-04-13 22:13

Pozostało 580 znaków

2019-04-12 16:24
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

Pozostało 580 znaków

2019-04-13 22:35
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, 2019-04-14 22:31
Dokładnie o to. Dzieki - piotrek1998 2019-04-14 14:48
@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ć. - Silv 2019-04-14 16:03
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. - piotrek1998 2019-04-14 16:09
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). - Silv 2019-04-14 16:14
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. - Silv 2019-04-14 16:16
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 - piotrek1998 2019-04-14 16:50

Pozostało 580 znaków

2019-04-14 22:27

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, 2019-04-15 06:19

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0