水平和垂直对齐 DIV答案

【问题标题】：Aligning DIVs horizontally and vertically水平和垂直对齐 DIV
【发布时间】：2013-11-25 16:00:20
【问题描述】：

我正在寻找一种方法来设置基本的 2 列博客类型布局，该布局允许 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 将具有不同的高度

【问题讨论】：

你能发布你迄今为止尝试过的代码吗？
粘贴您的代码以查看

标签： javascript jquery html css alignment

【解决方案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;
}

【讨论】：

感谢您的出色工作，但仍在寻找可以与 sql/mysql 输出（重复区域）一起使用的解决方案
也许你可以将你的 sql 数据集分成两个数据集？
哇......我不知道为什么我之前没有想到......现在一切正常，感谢您朝着正确的方向前进：D

【解决方案2】：

在您的 css 代码中使用 margin: auto;。

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

【讨论】：