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

Question

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

例如：在下面的代码片段中，id为one的div、id为two的div和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中添加大量元素时，没有滚动条出现。

• 从上面的示例代码中可以看到，“一些comp1”元素的宽度根据“第一个垂直放置的元素”的宽度进行了更改。这绝对是一个问题。

- Bruso

Answer 1

试试这个：

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

- hurrtz

---

这也适用于嵌套块。http://jsfiddle.net/eX35D/ 我会尝试一些更多的用例。 - Bruso

我们如何获得滚动条？现在当我们尝试将许多元素推入水平排列的 div 中时，它会将元素推到下一行。JSFiddle：http://jsfiddle.net/eX35D/4/ - Bruso

如果您不希望水平条断行，可以使用 white-space: nowrap。 - hurrtz

顺便说一句：不确定我是否正确理解了您的意思。如果您的意图是在页面底部创建滚动条，则我发布的jsfiddle就足够了。如果您想要滚动仅水平排列块的内容，则只需在白色空格声明下方添加“overflow: auto;”即可。 - hurrtz

是的，我的意图是仅为div（arrange-horizontally block）获取水平滚动条，overflow:auto确实起作用了。 - Bruso

Answer 2

使用inline-block将

元素水平显示。垂直示例请参见示例，非常简单。 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%;
}

- What have you tried

Answer 3

你尝试使用浮动（float）吗？它们都可以使用浮动在水平方向上对齐。 或者尝试查找"display Inline"。 对于垂直方向，请使用
标签，然后与顶部水平对齐。

- rushsangs