我正在嘗試編寫通用的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(水平顯示這些元素)。 顯示:表格單元格不垂直排列元素。 事實上；我正在尋找更好的方法，然后再解決問題。

這是我用來獲得想要的效果的css。還有一個變化，我要確保垂直或水平樣式的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; 
     }

這個問題-

當我嘗試在 水平/垂直樣式分區。

在上面的示例代碼中，“some comp1”元素的寬度根據“1stverticallyPlacedElement”的寬度進行了更改。這絕對是一個問題。

試試這個:

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

使用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%;
}

你試過用float嗎？它們都使用float水平對齊。 或者嘗試查找內聯顯示。 對于垂直，使用標簽，然后水平與頂部對齊。