获取div水平包装

Question

I'm making a blog in which the results of a search for articles will be contained in divs. The layout of my website is all horizontal (ie the articles scroll horizontally).

Making a single line of divs is easy but that not what I want. It will be easier if I explain with a diagram. Here's how I want the divs to be:

 ______________   ______________   ______________
|    Div 1     | |    Div 4     | |    Div 7     |
|______________| |______________| |______________|
 ______________   ______________   ______________
|    Div 2     | |    Div 5     | |    Div 8     |
|______________| |______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 6     |
|______________| |______________|

But if the window is taller then there's more space vertically, which should give:

 ______________   ______________ 
|    Div 1     | |    Div 5     |
|______________| |______________|
 ______________   ______________ 
|    Div 2     | |    Div 6     |
|______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 7     |
|______________| |______________|
 ______________   ______________
|    Div 4     | |    Div 8     |
|______________| |______________|

This is what I mean by horizontal wrapping. In short, the divs take as much vertical space as then can before occupying a new column.

I was hoping this was possible with pure html/css but I'm having a feeling that it's not possible without a little bit of javascript.

Answer 1

You can use Flexbox for this. You need to set fixed height on parent element or 100vh and flex-direction: column .

 * { box-sizing: border-box; } ul { display: flex; height: 100vh; flex-direction: column; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; list-style: none; padding: 0; } li { padding: 20px 60px; border: 1px solid black; } 

 <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul> 

Answer 2

I think in pure css this can only be done with flexbox:

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

Live-Example (change the height of the container):

https://codepen.io/MattDiMu/pen/zdBxad

edit: Yes, using 100vh for the size of the container is the much more elegant solution :)

Answer 3

Who told you this was not possible in CSS/HTML. It is possible. Here is a sample using simple css and not even a flexbox. You just need to know the right area to put CSS properties to. In your case you need the box to be float:left in order to consume the width of the container which can be dynamic like 50vw to consume 50% of the viewable screen width or in percentage if you like.

https://codepen.io/Nasir_T/pen/rzLavm

Hope this helps.

[EDIT]

As the question had horizontal in the last line of explanation when it was asked so i miss understood it. Anyway this answer can help someone who requires a pure css solution for horizontal stacking.