1

尝试设置一个 114 像素高和 100% 宽（页面宽度）的外部 DIV。在里面我想要三个 DIV 左、中和右。这些内部 3 个 div 的高度各不相同。我希望所有三个内部 DIV 从上到下居中（垂直对齐）。

我已经接近浮动左右或左右：0 和右：0 但卡在垂直居中的部分。左右 DIV 仅包含图像中心文本。很难在 jsfiddle 上显示图像，所以我无法提供太多示例，抱歉。

我找到了顶部和底部对齐但没有以运气为中心的示例。

谢谢！

编辑：

TyBlitz，你为我指明了正确的方向。谢谢！但是，在您的容器 div 高度 - 内部 div 高度上，您需要除以 2。例如：

114-50=64 then divide by 2 = 32 for top.

还需要使用 text-align (left/center/right) 使所有内部 DIV 达到 33% 并不令人兴奋，但它可以工作。似乎我应该能够使它们具有可扩展的宽度并仍然正确定位它们。这是我嵌入示例图像的小提琴：我的小提琴

4

3 回答 3

2

像这样？

只需浮动 3 个 div，给每个 div 一个高度，将它们相对定位（重要！）并给它们一个top: container.height - innerdiv.height;例如 container.height 为 114 & innerdiv.height 为 50 => 114-50 = 64=>top: 64px;

编辑：好吧，如果您不想让您的 div 全部为 33% ，那么通过一些简单的数学运算，您可以使用floatandmargin属性大致定位您的 div。

就像在你的这个小提琴中一样，我更新了。

其背后的数学是：

  1. Container.length - combined innerdiv.length = unoccupied.length
  2. margin-left: unoccupied.length / x (eg 50px / 5 = margin of 20% = 10px)
于 2013-09-09T23:02:40.913 回答
1

I think this can solve your problem, although you'll have to create 3 wrapper divs.

HTML

<div class="outer">
    <div class="leftDiv">
        <div class="leftInnerDiv">Left Div</div>
    </div>
    <div class="rightDiv">
        <div class="rightInnerDiv">Right Div</div>
    </div>
    <div class="centerDiv">
        <div class="centerInnerDiv">Center Div</div>
    </div>
</div>

CSS

.outer,
.leftDiv,
.rightDiv,
.centerDiv{
    height: 114px;
}

.leftDiv{
    float: left;
}
.rightDiv{
    float: right;
}
.centerDiv{
    overflow: hidden;
}

.leftDiv:before,
.rightDiv:before,
.centerDiv:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.leftInnerDiv,
.rightInnerDiv,
.centerInnerDiv{
    vertical-align: middle;
    display: inline-block;
}

.leftInnerDiv{
    background-color: red;
}
.rightInnerDiv{
    background-color: green;
}
.centerInnerDiv{
    background-color: blue;
}

jsfiddle link: http://jsfiddle.net/pv6yJ/1/

Please note though:

  • The right div is declared before the middle div in the html.
  • My solution (css vertical align) doesn't work on IE7 or lower.
于 2013-09-10T16:07:22.120 回答
0

我创建了这个示例来展示如何垂直对齐容器并使用列数 (css3)，它会自动将 3 个 div 布局为 3 个相等的列。

-moz-column-count: 1;
-webkit-column-count: 3;
column-count: 3;

对于不支持的浏览器 (IE)，您只需将宽度设置为 33% 并向左浮动。

http://codepen.io/tom-maton/pen/oqsEJ

希望这可以帮助

于 2013-09-11T11:15:03.057 回答