Css 在div中水平或垂直排列元素

我正在尝试编写通用的css选择器，它将垂直或水平排列包装在div中的任何元素。我无法控制将放置在外部div中的元素

例如：在下面的代码片段中，div（id=1）、div（id=2）和button（id=3）应该显示为水平排列的元素列表

<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行（水平显示这些元素）。 显示：表格单元格不垂直排列元素。 事实上我首先寻找更好的方法，然后再寻找解决方案

这是我用来获得所需效果的css。还有一个变化，我要确保垂直或水平样式的div都包含在带有.table的div中 下面只是一个例子，可能会有更多这样的组合

<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元素。对于竖直的例子，请看小提琴，它非常简单


HTML:

你试过用浮子吗？它们都使用float水平对齐。
或者尝试在线查找显示。
对于垂直，请使用标签，然后水平对齐顶部。
尝试以下操作：

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

这也适用于嵌套块。我将尝试更多的用例。我们如何获得滚动条？现在，当我们尝试用水平排列来推动div中的大量元素时，它正在推动下一行中的元素。JSFiddle：如果您不想让水平条变成新行，可以使用空白：nowrap。顺便说一句：不知道我是否理解正确。如果您打算在页面底部创建滚动条，那么我发布的JSFIDLE就足够了。如果您想单独对arrange horizontal块的内容进行scoll，那么您所要做的就是在空白声明的正下方添加“overflow:auto；”。是的，我的目的是只对div（arrange horizontal块）进行水平滚动，而overflow:auto确实有效。
.horizontal{
    float: left;
    border: 1px solid green
}

.horizontal  *{

    display: inline-block;
    margin-left: 10px;
}

.vertical {
    float: left;
    width: 100%;
    border: 1px solid blue
}

.vertical  > *{
    display :block;
    width: 100%;
}

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