不使用表格的CSS Table-Like對齊？ （CSS RelativeLayout）

Question

無論我上網，無論在哪裏，我總是不停地打敗我，我不應該使用表格。可悲的是，我是少數幾個仍然堅持使用它們的程序員之一 - 我坦率地發現CSS的對齊和佈局特性對我來說不夠強大，冷火雞，不要使用表格。設置我的個人程序員的特質之外，我想嘗試攻擊我的CSS系統主要discontentments之一：

比方說，我想有這樣的佈局：

+---+---+ 
| A | B | 
+---+---+ 
| C | D | 
+---+---+ 

在上面例如，我希望A和C的寬度相同，並且B和D的寬度保持不變。

我也想高度A和B保持鎖定在一起，我想C和D的高度保持不變。

爲了澄清，如果列中的任何元素變得更寬，我希望該列中的元素的所有變得更寬。如果一行中的任何元素變得更高，我又想讓同一行中的所有元素都變得更寬。

我剛剛描述的是我們的老朋友表的確切功能。在我看來，表格對於這些佈局非常有用！如果我嘗試類似於使用CSS佈局的東西，我可能會是這樣的：

+-------+---+ 
| A | B | 
+---*---*---+ 
| C | D | 
+---+-------+ 

這將非常不是我要找的那種佈局。 （A和C使鋸齒列，而不是完美，流暢的列，我寧願）

把我的問題簡單地說，我可以真的使用方式，使用CSS佈局（不是預先定義的寬度或高度）將一個CSS框邊緣的位置對齊到不同CSS框邊緣的位置。如果CSS支持一個簡單的功能，我可以立即放棄表格，並創建佈局甚至超出表格的功能！這種功率的一個很好但無用的例子是在桌子兩側的兩個斷開的盒子，動態地彼此共享完全相同的高度和垂直位置。

但不幸的是，在我對互聯網的搜索中，迄今爲止我發現的最先進的對齊方式是中心，左對齊和右對齊。所有與其他元素不相關的對齊類型，使它們無用。

我想要的只是一種將HTML元素與其他HTML元素對齊而不必使用表的方法！

編輯

雖然採摘標籤這個問題，我碰到一個描述傳來，幾乎總結了這一切：

的RelativeLayout：佈局在孩子的位置可以 描述相對於彼此或與父母相關。

有沒有CSS RelativeLayout？或者我堅持使用表格，只要我想這樣做？

我將接受最接近我想要的功能，而無需使用預定的寬度或高度（包括回答「沒事就好存在，」如果沒有其他人提供更好的東西）答案。

Answer 1

是可能的顯示元件是，不語義表格，僅使用CSS表。使用display屬性，可以在標記中包含div時模仿表格。 Check this article。

取決於你想要達到的目標，也有一些替代方案。如果您只希望每列中的兩行都粘在列的寬度上，則應該嘗試將行放入列標籤內，而不是相反。這是沒有預定義的維度。

而且，如果高度設定爲連續每個單元相同，你可以簡單地浮動他們離開，集裝箱寬度爲行寬的總和。這隻適用於預定義的尺寸。

CSS

div.c 
{ 
    width: 100%; 
} 

div.c>div:nth-child(2n-1) 
{ 
    width: 25%; 
    float: left; 
    background: blue; 
} 

div.c>div:nth-child(2n) 
{ 
    width: 75%; 
    float: left; 
    background: yellow; 
} 

這裏是一個小提琴：http://jsfiddle.net/kdani3/DbRuV/

更復雜的例子：http://jsfiddle.net/kdani3/DbRuV/1/

我認爲這是非常簡單的，比使用表格佈局更加簡單。

另外，我真的建議你看看CSS網格框架，如Twitter Bootstrap。這絕對值得一看。

Answer 2

我認爲使用純CSS，沒有Width，並使用table沒有，你可以使用Flex Layout

這是代碼

HTML

<section class="flexrow"> 
    <div class='item'>1asdf</div> 
    <div class='item'>2</div> 
</section> 
<section class="flexrow"> 
    <div class='item'>1</div> 
    <div class='item'>2</div> 
</section> 

CSS

.flexrow { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    -webkit-justify-content: space-between; 
    -moz-justify-content: space-between; 
    -ms-justify-content: space-between; 
    -o-justify-content: space-between; 
    margin-bottom: 10px; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    -ms-align-items: center; 
    -o-align-items: center; 
    -webkit-flex: none; 
    -moz-flex: none; 
    -ms-flex: none; 
    -o-flex: none; 
} 
.item { 
    -webkit-flex: 1; 
    -moz-flex: 1; 
    -ms-flex: 1; 
    -o-flex: 1; 
    margin: auto 10px; 
    border-radius: 5px; 
    border:1px solid black; 
} 

這裏是JsFiddle