html - Creating two elements with vw to create 100vw doesn't work -
this question has answer here:
i'm trying create 2 simple divs, 1 of 80vw
, other of 20vw
create 2 divs side side.
for reason doesn't work:
<div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div> <div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div>
fiddle: https://jsfiddle.net/4hvrz4o1/
<div style="display:flex"> <div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div> <div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div> </div>
the original browser layout madness has method it, have remember it. personally, find the flexbox model more aligns "way of thinking" layout, use more often. here's cheat sheet common use cases, esp. side-by-side case.
Comments
Post a Comment