將div居於div的前導和尾隨div中

Question

我想將中間的黃色div置於藍色容器div的中心，而不考慮左側和右側的文本/ div的大小。 中心div的大小應自動調整以適合文本，因為它將動態更新。

然后，左側的黃色div應該用右側對齊的文本填充左側的剩余間隙，該div左側的所有多余文本都應隱藏在左側藍色容器的邊緣之外。

Answer 1

您可能應該簽出flexbox。 這是一個很好的指南： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

這樣的事情應該可以解決問題：

.container{
    padding:5px;
    background:blue;
    display: flex;
    justify-content: center
}

實際觀看： https : //jsfiddle.net/kzj983h2/3/

Answer 2

嘗試看看flexboxes 。 我用一個簡短的例子說明了你在說什么。 它應該可以滿足您的需求。

 $('#button').click(function(){ $('.two').text($('.two').text() + ', and more words'); }); 

 #content { display:flex; background:black; width:500px; padding:3px; justify-content:space-between; flex-shrink:0; overflow:hidden; } .one, .two, .three { background:white; padding:3px; } .one, .three { width:10%; } .two { width:80%; margin: 0 3px; } #main { margin: 0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="main"> <div id="content"> <div class="one">Block one</div> <div class="two">Another word</div> <div class="three">Block three</div> </div> <br> <button id="button">Click me!</button> </div>