在一个 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

用于inline-block水平显示 div 元素。垂直的例子，看fiddle，很简单。

http://jsfiddle.net/Qu66W/6/

HTML：

<div id="horizontal">
    <div>First one</div>
    <div>Second one</div>
    <div>Third one</div>
</div>

CSS：

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

Answer 2

尝试这个：

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