在容器内将响应式 div 对齐到右侧

Question

我有一个父 div 和两个子 div。我的目标是使一个 div 居中并将另一个 div 向右对齐，并使两者都响应。

在这种类型的设置中，我似乎找不到将第二个对齐到右侧的传统方法：

<div id="container">

    <div id="middle">Centered to middle</div>

    <div id="right">I want to be to the right</div>

</div>

CSS：

#container {
    position: relative;
    width: 100%;
}

#middle {
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width:150px;
    height:300px;
}

#right {
    max-width:150px;
    width:100%;
}

这是jsFiddle。我们如何破解这个难题？

Answer 1

1. 设为inline-block，否则第二个div 将始终在第二行

2. 减少他们width的百分比，使其变为33%

3. 删除max-width

#container {
    position: relative;
    width: 100%;
    text-align:middle;
}
div{
    display:inline-block;
}
#middle {
    background: #ddd;
    margin: 0 auto;
    position: relative;
    width: 100px;
    margin-left:40%;
    height:300px;
}

#right {
    background:yellow;
    width:33%;
float:right;
}

<div id="container">
    
    <div id="middle">Centered to middle</div>
    
    <div id="right">I want to to be to the right</div>
    
</div>

Answer 2

添加了一个伪元素作为左列，因此布局变为 [left] + [middle] + [right] 并为父设置table，为子设置table-cell。

JSFiddle Demo

#container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
#container:before, #middle, #right {
    display: table-cell;
}
#container:before {
    content:"";
}
#middle {
    background: aqua;
    width: 50%;
}
#right {
    background: yellow;
}

<div id="container">
    <div id="middle">Centered to middle</div>
    <div id="right">I want to to be to the right</div>
</div>

还有另一种使用flexbox的方法，可以找到here。