Question

我有这个设置：

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

父是一个永久固定的元素，比如100x20。

moverBoy 和 smartBoy 总是有20个高度，内嵌块和 vertical-align：top 所以它们彼此相邻，在任何地方都没有空格或文本。

使用JS或CSS动画

moverBoy 的宽度更改。我需要做的是让smartBoy改变他的宽度，以便总是占用宽度的其余部分，以便父母总是被填充。

Answer 1

您可以通过浮动.moverBoy并修改overflow的{{1}}来获得您正在寻找的内容（一直工作回到IE6左右！）：

.smartBoy

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"> </div> <div class="smartBoy"> </div> </div>和.moverBoy会相应调整。

Answer 2

您可以使用CSS3 flex。在下面的代码段中，将鼠标悬停在任意xBoys上，其宽度将更改为75%，另一个将填充可用空间。但是，仅适用于现代浏览器。

您必须将宽度应用于.moverBoy到flex-basis属性。因此，flex: 1 1 75%会将其宽度更改为75%并相应地调整.smartBoy。其他属性为自动grow和shrink，其中1为是。

<强>段：

.parent {
    width: 100px; height: 20px;
    border: 1px solid gray;
    display: flex;
    flex-direction: columns;
}
.parent > div {
    flex: 1 1 0%;
    transition: all 500ms;
}
.parent > div:hover {
    flex: 1 1 75%;
}
.moverBoy { background-color: #f00; }
.smartBoy { background-color: #00f; }

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

Answer 3

首先，因为移动设备和智能设备在一条单独的线路上，所以它们之间会自动有空格。你可以通过使它们成为相同的行来解决这个问题，或者像这样添加注释：

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

对于css，你可以简单地使用Calc：

.moverBoy {
    width:20px;
}
.smartBoy {
    width: calc(100% - 20px);
}

以下是它的一个小例子：http://jsfiddle.net/083pnubk/

CSS让div占用剩下的空间

3 个答案: