Question

我正在尝试编写通用的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-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。
从上面的示例代码，＆＃34;一些comp1＆＃34;元素的宽度根据＆＃34; 1stverticallyPlacedElement＆＃34;的宽度而改变。这绝对是一个问题。

Answer 1

使用inline-block水平显示div元素。对于垂直示例，请参阅小提琴，它非常简单。

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

Answer 3

你尝试使用浮动吗？它们都使用float水平对齐。或者尝试查找显示内联。对于垂直，请使用
标签，然后与顶部水平对齐。

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

3 个答案: