我正试图写一个通用的css选择器，它可以将div中的任何元素垂直或水平排列。我不能控制将被放置在外部div中的元素。
例如：在下面的代码片段中，div（id=one）、div（id=two）和button（id = three）应该显示为水平排列的元素列表。

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

类似地，我需要编写另一个css选择器来以垂直方式排列元素。

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

我尝试使用display：table-row（水平显示这些元素）。display：table-cell不垂直排列元素。事实上，我正在寻找更好的方法，然后第一个解决方案。
这是我使用的CSS来获得预期的效果。还有一个变化，我确保垂直或水平样式的div都包含在一个div中，下面的.table只是一个例子，可能会有更多这样的组合。

<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; 
     }

关于这个的问题-

• 当我尝试在水平/垂直样式的div中推送大量元素时，没有滚动条出现。
• 从上面的示例代码中，“some comp 1”元素的宽度根据“1stverticallyPlacedElement”的宽度进行更改。这绝对是一个问题。