将一个div放在一个带有前导和尾随div的div中

Question

我想将中间的黄色div放在蓝色容器div中，而不管左侧和右侧的text / div的大小。中心div的大小应自动调整以适应文本，因为它将动态更新。

左侧黄色div应该用右对齐文本填充左侧的剩余间隙，此div左侧的任何额外文本应隐藏在左侧蓝色容器的边缘之外。

Answer 1

你可能应该检查一下flexboxes。这是一个很好的指南：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。我用你所谈论的内容做了一个简单的例子。它应该与你需要的东西一起工作..

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;