> On May 19, 2017, at 4:49 AM, Tom Livingston <[email protected]> wrote:
>
> I have a content module. A div containing text above a flexible-width
> video (could easily be an image too).
>
> I have 2 of these on a web page. They stack on narrow widths, and go
> side-by-side at wide enough widths. They have different amounts of
> text in each. I will inevitably be asked to make the videos line up
> with each other when these modules appear side-by side. I started down
> the path of a min-width on the parent and positioned the videos
> absolute bottom:0; This presents it's own issues and is finicky.
>
> Any other ideas? I think I am in a 'forest for the trees' situation
> here and can't see another easy solution.
Flexbox?
<div class=wrapper style=display:flex>
<div class=module style=flex-basis:50%; display:flex; flex-flow: column>
<div> text text text</div>
<div> video </div>
</div>
<div class=module style=flex-basis:50%>
<div> text text text</div>
<div> video </div>
</div>
</div>
The trick then to align the videos at the bottom: .module > div + div {
margin-top: auto}
It is a situation where display: grid **with display: subgrid ** support would
be nice. Unfortunately, that is a no-go for the next 2 years.
Assuming I understand it all correctly…
PS - Something similar, images of various sizes, caption, to give you some idea.
https://emps.l-c-n.com/category/image/sand-reflections/
Philippe
--
Philippe Wittenbergh
https://l-c-n.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
