html - How can I make my inline divs "nestle" in to one another, even though they're different sizes? -
i have issue display of new website i'm working on. basically, content shown in 2 columns, , reduced 1 when viewing smaller screen.
when i've added content these boxes, first "column" on second row lower second element on first "row", next row down maintains margin element directly above it, not element last parsed.
here's example of problem:
body{ background-color:lightgray; } .box{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width:48%; margin:1%; padding:10px; background-color:white; display:inline-block; float:left; }<!doctype html> <html lang="en"> <head> </head> <body> <div class="box"> <h1>box 1</h1> test content 1 </div> <div class="box"> <h1>box 2</h1> bit longer<br/> last one<br/> <br/> lot longer<br/> last 1 actually<br/> </div> <div class="box"> <h1>box 3</h1> cold , lonely down here :(<br/> want waifu box 1<br/> </div> </body> </html>here's how actually want look: 
how can change styles match this? possible?
you use :nth-child() selector select 2n elements , float right.
* { box-sizing: border-box; } body { background-color: lightgray; } .box { width: 48%; margin: 1%; padding: 10px; background-color: white; float: left; } .box:nth-child(2n) { float: right; }<div class="box"> <h1>box 1</h1> test content 1</div> <div class="box"> <h1>box 2</h1> bit longer <br/>than last one<br/> <br/>its lot longer <br/>than last 1 actually<br/> </div> <div class="box"> <h1>box 3</h1> cold , lonely down here :( <br/>i want waifu box 1<br/> </div> <div class="box"> <h1>box 4</h1> cold , lonely down here :( <br/>i want waifu box 1<br/> </div>
Comments
Post a Comment