水平和垂直對齊DIV

Question

我正在尋找一種方法來設置一個基本的2列博客類型布局，它允許div水平內聯，但也可以直接位於上面的div下面。 我試過顯示：內聯和浮動div，仍然無法讓它工作得很好。 我不確定這是否可以單獨使用CSS，但是希望如此

請檢查下面的鏈接，看看我的意思，因為我很確定我沒有盡可能地解釋它。

我想做什么：

我一直得到的：

<div style="display:inline-block; width:400px;">
     <div style="padding:5px; margin:10px; background:#222;">
     <div class="small">date | name</div>
     <div class="data">blah blah blah</div>
     </div></div>

使用上面的代碼，div很好地相互靠近，但我從數據庫中提取數據，因此每個div將具有不同的高度

Answer 1

這件事有效：

http://jsfiddle.net/8mxZe/

HTML：

<div class="container">
  <div class="left-aside">
    <div class="block one">ONE</div>
    <div class="block two">TWO</div>
    <div class="block three">THREE</div>
  </div>
  <div class="right-aside">
    <div class="block one">ONE</div>
    <div class="block two">TWO</div>
    <div class="block three">THREE</div>
  </div>
</div>

CSS：

.block {
  margin: 5px;
  background-color: #22CCFF;
}
.left-aside,
.right-aside {
  width: 50%;
}
.left-aside {
  float: left;
}
.right-aside {
  float: right;
}
.left-aside .one {
  height: 200px;
}
.right-aside .one {
  height: 250px;
}
.left-aside .two {
  height: 300px;
}
.right-aside .two {
  height: 200px;
}
.left-aside .three {
  height: 300px;
}
.right-aside .three {
  height: 150px;
}

Answer 2

使用margin: auto; 在你的css代碼中。

<div style="text-align:center">
  <div style="margin:auto">Layer, der auch in Firefox und Opera zentriert wird</div>
</div>