html - 将响应式 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. 按百分比减少它们的宽度，使其达到33%

3. 移除最大宽度

#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>