Arrange elements horizontally or vertically wrapped in a div

Question

I am trying to write generic css selectors which will arrange any elements wrapped inside a div as vertically or horizontally. I do not have control on the elements which will be placed inside outer div.

For example : In below snippet, div (id=one), div(id=two) and button (id = three) should be displayed as horizontally arranged list of elements.

<div class="arrange-horizontally">
  <div id="one"></div>
  <div id="two"></div>
  <button id="three"></button>
</div>

Similarly, I need to write another css selector to arrange elements in vertical fashion.

<div class="arrange-vertically">
  <div id="one"></div>
  <div id="two"></div>
  <button id="three"></button>
</div>

I tried with display:table-row (displays these elements horizontally). display:table-cell does not arrange elements vertically. In fact; I am looking for better approach first and then solution.

This is the css I am using to get the desired effect. One more change, I am making sure either of the vertical or horizontal styled div is enclosed in a div with .table Below is just one of the example and there could be more such combinations.

<div class="table>
    <div class="arrange-vertically">
       <div>
             <button>1stverticallyPlacedElement</button>
   </div>
       <div class="arrange-horizontally">
             <div>some comp1</div>
             <div>some comp1</div>
             <div>some comp2</div>
       </div>

      <button id="three">This is 3rd element in vertical block</button>
    </div>
</div>


    .table {
        display: table;
     }

     .arrange-horizontally {
         overflow-x:scroll;
     }

     .arrange-horizontally > * {
         display:table-cell;

     }

     .arrange-vertically {
     }

     .arrange-vertically > * {
         display:table-row; 
     }

Issues with this -

• No scroll bars are coming when I try to push lot of elements in the horizontal/vertically styled div.

• From sample code above, "some comp1" element's width is changed as per "1stverticallyPlacedElement"'s width. This is definitely an issue.

Answer 1

Try this:

.arrange-horizontally > * {
    display: inline-block;
    text-align: center;
}
.arrange-vertically > * {
    display: block;
}