將響應div對齊到容器內的右側

Question

我有一個父div和兩個子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 table-cell 。

JSFiddle演示

 #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還有另一種方法，可以在這里找到。