javascript - CSS使div占用其余空间

我有这个设置：

 <div class="parent">
   <div class="moverBoy"></div>
   <div class="smartBoy"></div>
 </div>

父级是永远固定的元素，例如100x20。

moverBoy和smartBoy始终具有20高度，并且是内联块和垂直对齐：顶部，因此它们彼此相邻，并且在任何地方都没有空格或文本。

moverBoy的宽度随JS或CSS动画而变化。我需要做的是让smartBoy更改其宽度以始终占用其余宽度，以便始终填充父级。

最佳答案

您可以通过浮动.moverBoy并修改overflow的.smartBoy来获得所需的内容（一直工作到IE6左右！）：

window.onload = function(){
  document.getElementsByClassName('moverBoy')[0].style.width = '100px';
}

body{ margin:0 }
.moverBoy{
    float: left;
    background:#F00;
    width:300px;
    transition: width 2s;
}
.smartBoy{
    overflow: hidden;
    background:#0F0;
}

<div class="parent">
   <div class="moverBoy">&nbsp;</div>
   <div class="smartBoy">&nbsp;</div>
</div>

或者，您可以让代码段表现得像一张桌子：

window.onload = function(){
  document.getElementsByClassName('moverBoy')[0].style.width = '100px';
}

body{ margin: 0; }
.parent{
    display:table;
    width: 100%;
}
.moverBoy{
    display: table-cell;
    background:#F00;
    width:300px;
    transition: width 2s;
}
.smartBoy{
    display: table-cell;
    background:#0F0;
}

<div class="parent">
   <div class="moverBoy">&nbsp;</div>
   <div class="smartBoy">&nbsp;</div>
</div>

无论哪种方式，您都可以更改父元素的宽度，或者.moverBoy和.smartBoy会相应地进行调整。

关于javascript - CSS使div占用其余空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27152311/