Question

我在容器中有3个div。

我希望左边的一个（绿色）锚定（有一些偏移）到左下角，中间的元素（红色）停靠在左边的元素并垂直居中，右边的一个（蓝色）是停靠在右边但垂直居中。

这是我正在研究的fiddle。

我尝试使用right和margin-right等但是它不起作用，here是我的一些尝试。

这是初始设置：

<div class="container">
    <div class="left">
    </div>
    <div class="middle">
    </div>
    <div class="right">
    </div>
</div>
.container {
    background: gray;    
    height: 300px;
    width: 100%;
}
.container > div {
    height: 100px;
    width: 100px;       
}
div.left {
    background: green;
    height: 250px;
}
div.middle {
    background: red;
}
div.right {
    background: blue;
}

结果： enter image description here

Answer 1

我根据你的评论改变了小提琴。这是你想要的吗？ Fiddle

*我已经更新了小提琴

.container {
    position: relative;
    background: gray;    
    height: 300px;
    width: 100%;
}
.container > div {
    height: 100px;
    width: 100px;       
}
.left {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 250px !important;
    background: green;
}
.middle {
    position: absolute;
    left: 100px;
    bottom: calc(50% - 50px);
    background: red;
}
.right {
    position: absolute;
    right: 0;
    bottom: calc(50% - 50px);
    background: blue;
}

Fiddle

Answer 2

如果您仍想保留浮动布局（即左侧和中间不会相互重叠），解决方案是用另一个<div>元素包装每个div的内部内容，并绝对尊重它们他们的父母：http://jsfiddle.net/teddyrised/drrz6/2/

<div class="container">
    <div class="left"><div></div>
    </div>
    <div class="middle"><div></div>
    </div>
    <div class="right"><div></div>
    </div>
</div>

对于你的CSS：

.container {
    background: gray;    
    height: 300px;
    width: 100%;
}
.container > div {
    height: 300px;
    width: 100px;
    position: relative;
}
.container > div > div {
    width: 100px;
    height: 100px;
    position: absolute;
}
.left {
    float: left;
}
    .left > div {
        background: green;
        bottom: 0;
    }
.middle {
    float: left;
}
    .middle > div {
        background: red;
        top: 50%;
        margin-top: -50px; /* Half of height */
    }
.right {
    float: right;
}
    .right > div {
        background: blue;    
        bottom: 0;
    }

Answer 3

只需使用弹性盒子：

演示 http://jsfiddle.net/fr9U5/

HTML：

<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

CSS：

.box {
    width: 270px;
    height:210px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: gray;
}
.left {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    background-color: green;
}
.middle {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    background-color: red;
}
.right {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    background-color: blue;
}
/*
    Legacy Firefox implementation treats all flex containers
    as inline-block elements.
*/
 @-moz-document url-prefix() {
    .flex-container {
        width: 100%;
        -moz-box-sizing: border-box;
    }
}
.box > div {
    border:1px solid #000;
    width: 33%;
    height:33%;
}

Answer 4

行。我想position:absolute对我来说最有效，虽然我更喜欢中（红色）元素依赖于左（绿色）元素。

Here是解决方案，感谢Terry提示将自我的半尺寸减去垂直居中。

.container {
    background: gray;    
    height: 300px;
    width: 100%;
    position: relative;
}
.container > div {    
    height: 100px;
    width: 100px;       
    position: absolute;
}
div.left {    
    background: green;
    left: 0;
    bottom: 0;    
    height: 250px;
}
div.middle {    
    background: red;
    left: 100px;
    bottom: 0;    
    top: 50%;
    margin-top: -50px; //deduct lalfsize of self

}
div.right {
    background: blue;
    right: 0;
    top: 50%;
    margin-top: -50px; //deduct lalfsize of self
}

对齐div中的元素

4 个答案: