css - 将元素水平或垂直排列在 div 中

Question

我正在尝试编写通用的 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 包含在带有 .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。

• 从上面的示例代码中，“some comp1”元素的宽度根据“1stverticallyPlacedElement”的宽度而改变。这绝对是个问题。

Answer 1

试试这个:

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