Divy obok siebie w układzie 60% - 40% = na 100% szerokości okna przeglądarki

pytanie zadane 31 sierpnia 2017 w HTML i CSS przez andrzej-cs Początkujący (300 p.)

Witam.

Mam bardzo prosty do rozwiązania problem. Aczkolwiek głupieję już.

Mamy takie coś:

Kontener, który zostawia zawsze po bokach padding na 10px (lewo, prawo) ma 100% szerokości i wewnątrz kontenera dwa divy. Chcę aby div z nagłówkiem h1 miał 60% szerokości kontenera a pozostałą szerokość 40% zajął znacznik img ze zdjęciem. Zawsze zdjęcie jakbym nie zrobił jest albo wyżej albo niżej. Znaczy wysokość nie dopasowuje się do wysokości diva z h1.

Jak wy byście to zaprogramowali aby działało jak należy ??

Tutaj zrzut z photoshopa jak chciałbym aby to wyglądało.

komentarz 31 sierpnia 2017 przez KoruS Obywatel (1,630 p.)

daj ss jak wygląda to co zrobiłeś + daj skrypty html i css

1 odpowiedź

odpowiedź 31 sierpnia 2017 przez radek024 Szeryf (77,160 p.)

Najłatwiej: float:left + box-sizing: border-box.

Najszybciej: flex + box-sizing: border-box.

Najbardziej hipstersko: grid + column-gap.

Wszystkie metody łączy .container (w gridzie pewnie można to nieco inaczej - nie znam go na tyle dobrze, aby jednak być pewnym). Wszystko tutaj jest kwestią użycia jednej z wyżej wymienionych metod. Jeżeli idzie o box-sizing, to materiał na ten temat przygotowało koduje. Budowanie stron za pomocą float: left jest wyjaśnione w kursach p. Zelenta i w wielu innych miejscach w internecie. Na temat fleboxa oraz grida - analogiczne :).

Jeżeli nie rozumiesz na czym polega tworzenie stron za pomocą ww. "technologii", to warto to przetrenować. Będziesz miał później zdecydowanie łatwiej :).

komentarz 31 sierpnia 2017 przez andrzej-cs Początkujący (300 p.)

box-sizing: border-box użyłem oczywiście, nawet dodałem sobie do reset.css

Natomiast gdy dodaję zdjęcie w img zawsze jest to samo. Jak jest zwykły div to wtedy wszystko super, dopasowuje się. Trudno, zrobię to w media queries dla poszczególnych rozdzielczości, to w sumie kwestia dopasowania wysokości. Ale dzięki, zaraz sobie to przestudiuję.

komentarz 31 sierpnia 2017 przez radek024 Szeryf (77,160 p.)

Zawsze obrazek możesz dać w diva z wysokością, nadać overflow:hidden i wsadzić do niego obrazek z width: 100%. Nie jest to jednak najlepsze rozwiązanie.

komentarz 31 sierpnia 2017 przez andrzej-cs Początkujący (300 p.)

Podstawiałem też jako tło w CSS. Chciałem ten element z pierścionkiem na czerwonym tle zrobić responsywny, aby skalował się z tym divem obok niestety jest problem....

komentarz 31 sierpnia 2017 przez radek024 Szeryf (77,160 p.)

Pamiętaj, że zawsze możesz pobawić się background-position. Jeżeli pierścionek jest na samym środku, wystarczy background-position: center center. Będzie na środku niezależnie od wielkości bloków, ale wtedy musi być jako tło.

komentarz 31 sierpnia 2017 przez andrzej-cs Początkujący (300 p.)

Nie da się po prostu zrobić aby pierścionek wraz z divem obok nie zależnie od rozdzielczości skalowały się zachowaniem proporcji oraz stałej wysokości ? Bo docelowo chcę to uzyskać.

komentarz 31 sierpnia 2017 przez radek024 Szeryf (77,160 p.)

Grid jest w stanie to zapewnić. Ewentualnie można się bawić niewygodnymi vh i vw.

1	komentarz 31 sierpnia 2017 przez andrzej-cs Początkujący (300 p.) Nigdy szczerze z tych gridów nie korzystałem. I nie jest to widzę, aż tak proste do ogarnięcia. Znaczy proste pewnie jest ale nie jest tak prosto tego ogarnąć. Spróbuję z tym overflow dla kontenera, który do trzyma.

komentarz 31 sierpnia 2017 przez andrzej-cs Początkujący (300 p.)

Z overflow dla kontenera niestety obrazek jest ucinany.

Jakby miało to wyglądać w moim przypadku z tym gridem ? Aby obydwa divy zachowały taką samą wysokość ?

Może ktoś pomóc ?