divを並べて配置するにはどうすればよいですか？

Question

私がしたいのは、divを互いの上に積み重ねる方法ではなく、隣り合わせに配置することです。

サイドノート：

は

私はdiv要素が並んことが、新しいリストのdiv要素を追加したり、いくつかの画面サイズに応じて取り出し、画面の右上から始めたいが、常にdivを開始するには画面上部の右から左へ

li { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="lists1"> 
 
    <ul> 
 
    <li>option 1</li> 
 
    <li>option 2</li> 
 
    <li>option 3</li> 
 
    <li>option 4</li> 
 
    </ul> 
 
</div> 
 
<div class="lists2"> 
 
    <ul> 
 
    <li>option 1</li> 
 
    <li>option 2</li> 
 
    <li>option 3</li> 
 
    <li>option 4</li> 
 
    </ul> 
 
</div> 
 
<div class="lists3"> 
 
    <ul> 
 
    <li>option 1</li> 
 
    <li>option 2</li> 
 
    <li>option 3</li> 
 
    <li>option 4</li> 
 
    </ul> 
 
</div>

Answer 1

divコンテナに同じクラスを与え、そのようにCSSでそれらにfloat:rightを追加します。 https://jsfiddle.net/q6c34sqk/1/

EDIT：よりエレガントなソリューションのためのフレキシボックスを使用します。 https://jsfiddle.net/q6c34sqk/2/

<div class="main-contain"> 
    <div class="lists"> 
    <ul> 
     <li>option 1</li> 
     <li>option 2</li> 
     <li>option 3</li> 
     <li>option 9</li> 
    </ul> 
    </div> 
    <div class="lists"> 
    <ul> 
     <li>option 1</li> 
     <li>option 2</li> 
     <li>option 3</li> 
     <li>option 4</li> 
    </ul> 
    </div> 
    <div class="lists"> 
    <ul> 
     <li>option 1</li> 
     <li>option 2</li> 
     <li>option 3</li> 
     <li>option 4</li> 
    </ul> 
    </div> 
    <div class="lists"> 
    <ul> 
     <li>option 1</li> 
     <li>option 2</li> 
     <li>option 3</li> 
     <li>option 7</li> 
    </ul> 
    </div> 
</div> 

を

CSS

li { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

.main-contain{ 
    display: flex; 
    justify-content: flex-end; 
} 

.lists { 
    display: inline-block; 
}