当容器减少时，防止浮动div分裂成行

Question

问了一个similar question here，我收到了容器盒的满意答案，但随着它变得越来越小，正如你所看到的那样，每个按钮仍然作为容器跳转到新行＆＃34;收缩＆＃34;被另一个人取代。

对于＆＃34;传入＆＃34;也是如此。盒子但它不是很明显，我想这里的答案是什么，它会解决这两个问题。

我希望它看起来像是一个完全平稳的过渡而没有任何破坏：

你可以看到旧的＆＃34; divs＆＃34;打破排名，而输入似乎并不那么关心。

对于它的价值，它们都是浮动的，代码看起来像这样:(不完整但你明白了）

void destroyTree(Node *cur_node) {
    if (cur_node!=NULL) {
        // explore and delete on left
        destroyTree(cur_node->left); // recursive-call
        // explore and delete on right
        destroyTree(cur_node->right); // recursive-call
        // delete each node
        delete cur_node;
    }
}

这里是控制转换的（杂乱）代码：

<div class="box-padder">
  <div class="step-container">
    <div class="step step-1">
      <h1 class="box-header">ENTER YOUR ZIP CODE</h1>
      <input autocomplete="on" class="input" id="zip" maxlength="5" placeholder="Enter Zip Code" type="tel" value="83406" />
      <div class="tcenter">
        <div class="next first-next">NEXT &nbsp;<span class="gte">&rsaquo;</span></div>
      </div>
    </div>
    <div class="step step-2">
      <h1 class="box-header">FULL NAME</h1>
      <input autocomplete="on" class="input" id="full_name" placeholder="Your Full Name" type="text" value="a b" />
      <div class="tcenter">
        <div class="back">BACK &nbsp;<span class="gte">&lsaquo;</span></div>
        <div class="next">NEXT &nbsp;<span class="gte">&rsaquo;</span></div>
      </div>
    </div>

这是我从this answer获得的滑块：

if (!window.animating && window.step < window.MAXSTEP) {
  window.animating = true;
  // Necessary for smooth transition; needs work
  $('.step-' + window.step).css('float', 'left')
  $('.step-' + window.step).css('width', '310px')
  $('.step-' + window.step).css('overflow', 'hidden')
  $('.step-' + (window.step + 1)).css('float', 'right')

  // Start decreasing font size
  $('.step-' + window.step).find('.box-header').animate({
    'font-size': '9px'
  }, sliderSpeedUp, function() {})

  // Undo the changes please. For some reason you have to use animate. If you can figure out why,
  // tell me because I have no f clue
  $($('.step-' + window.step).find('.box-header')[0]).animate({ 'font-size': '23px', 'color': 'maroon' }, 250, function() {})

  // Slide boxes
  $('.step-' + window.step).slideLeftHide(sliderSpeedUp, function() {
    // Buttons
    setButtons();
    window.animating = false;
  });
  $('.step-' + (window.step + 1)).slideLeftShow(sliderSpeedDown, function() {
    // Buttons
    setButtons();
    setTimeout(function() {
      window.animating = false;
    }, 250);
    window.step++;
  });
}