Mam małą zagwozdkę. Moim planem było stworzenie bloku (klasa "wrapper") o stałej (450px) szerokości. W nim miały znajdować się pomniejsze bloki (klasa "single"), mające stałą (200px) wysokość i zawierające pewne informacje: obrazek (klasa "image", w przykładzie użyłem byle czego znalezionego w google), jakąś nazwę/tytuł (klasa "title"), oraz opis (klasa "description"). Chciałem, by obrazek był po lewej stronie, a nazwa/tytuł + opis z prawej (dlatego zamknąłem je w bloku o klasie "info"). Chciałem też, by nazwa/tytuł był zawsze - bez względu na długość opisu - u góry, a opis był zamieszczony pod nim i jeżeli byłby zbyt długi, to żeby można było go przewijać (zastosowałem do tego overflow: auto). Zadowalające efekty otrzymałem przez użycie flexboxa na klasie "single" (co zawiera przykład), ale również przez odpowiednie użycie float: right.
<article class="wrapper">
<section class="single">
<div class="image"></div>
<div class="info">
<header class="title">Title</header>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</section>
</article>
.wrapper {
background-color: red;
box-sizing: border-box;
padding: 10px;
max-width: 450px;
}
.single {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background-color: green;
height: 200px;
}
.image {
background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');
display: inline-block;
height: 100%;
width: 33%;
}
.info {
display: inline-block;
width: 66%;
}
.title {
margin: 10px 0;
text-align: center;
text-transform: uppercase;
}
.description {
padding: 0 5px;
height: 162px;
overflow: auto;
}
Nie jestem pewny, czy przypadkiem nie popełniłem błędu przez użycie display: inline-block i przez ustalenie width'ów (to są takie resztki z poprzedniego eksperymentowania), bo chyba coś podobnego uzyskałbym przy flex: 1 w "image" i flex: 2 w "info". Byłbym wdzięczny również i za podpowiedź w tej kwestii, ale to nie tego do końca dotyczy moje zapytanie.
Moja zagwozdka: czy istnieje jakiś mniej skomplikowany sposób, bez konieczności używania floatów (bo chyba od tego nie są) czy tabel (bo chyba też nie od tego są), by uzyskać podobny efekt? Próbowałem skorzystać z właściwości "position", ale działy mi się dziwne rzeczy. W podanym przeze mnie rozwiązaniu boli mnie też użycie konkretnej wartości dla wysokości klasy "description", żeby zająć całą możliwą powierzchnię. Może jednak zastosowanie "display: inline-block" było dobrym podejściem, tylko ja coś pominąłem? Bo jak próbowałem z tym "display", to blok klasy "info" schodził niżej i jedynym sposobem, by nazwa/tytuł była na górze, to odpowiednie wypełnienie opisu ("description"). Jak tekstu było za mało, to nazwa/tytuł były niżej wraz z opisem.
Będę wdzięczny za każdą pomoc w związku z moją wątpliwością, jak również wszelakie dodatkowe opinie/sugestie związane z moim kodem. Z góry dziękuję.
