水平和垂直对齐DIV

Question

我正在寻找一种设置基本的两列博客式布局的方法，该布局允许div在水平方向上内联，但也可以直接位于上面的div下面。我尝试使用display:inline和浮动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的高度都不同。

- WFDNexus

---

你能否发布一下你目前尝试过的代码？ - Nikhil N

请粘贴您的代码以查看 - Sridhar R

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

- dooxe

---

谢谢，是的，它很好用，但我仍在寻找一个可以与 SQL/MySQL 输出（重复区域）一起使用的解决方案。 - WFDNexus

你可以把你的 SQL 数据集分成两个数据集吗？ - dooxe

哇......我不知道为什么以前没有想到这个......现在所有的都运作正常了，感谢你给我正确方向上的推动 :D - WFDNexus

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>

- dyingangel666