html - How do I make a row of divs with rows? -
i trying make row of divs, each div has 2 rows. have following code:
index.html
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title>row of divs</title> <link href="style.css" rel="stylesheet"/> </head> <body> <div class="inline"> <div class="block"> <p> abc <br> def </p> </div> <div class="block"> <p> ghi <br> jkl </p> </div> <div class="block"> <p> mno <br> pqr </p> </div> <div class="block"> <p> stu <br> vwx </p> </div> </div> </body> </html> style.css
div.inline{ display: inline; } div.block{ display: block; } so want following output:
abc ghi mno stu def jkl pqr vwx but folling output:
abc def ghi jkl mno pqr stu vwx how can fix code stay inline row of rows, shown above?
like this: https://jsfiddle.net/ar97yzqv/1/ css:
.inline{ display: inline; } .block{ display: inline-block; }