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