Html 仅当相邻图元碰撞时才推动相邻图元的移动图元

我有一个装有两个孩子的容器

一个子项具有动态宽度，在其最大宽度处可以填充容器

另一个子项具有固定的宽度并开始隐藏，因为它的起点位于

溢出：隐藏的
容器的右侧

我想要的是固定宽度的子对象向左移动，以便它正好适合容器的右侧，这样

a） 如果两个孩子都适合这个容器，那么另一个元素应该说是“放在左边”和“放在左边”

b） 如果两个元素都没有空间-固定宽度元素应尽可能向左推动另一个元素，以便装入容器的右侧

以下是我尝试过的：


.container{
宽度：200px；
高度：50px；
边框：1px纯绿色；
溢出：隐藏；
空白：noWrap；
}
跨度{
高度：50px；
显示：内联块；
}
.儿童1{
背景：水；
浮动：对；
宽度：50px；
右边距：-50px；
过渡期：2秒；
}
.container:hover.child1{
右边距：0；
}
.儿童2{
背景：番茄；
//宽度：100%；
}

固定的
动态宽度
固定的
这是一个动态宽度框
由于css不能执行条件语句（bar媒体查询），我认为单凭css不可能做到这一点

更新


我已经看到，使用CSS3转换（在现代浏览器中工作）实际上是可能的。但是，为了防止一些用户可能需要CSS3转换无法提供的旧浏览器支持，我还是把它留在这里


除此之外，我还使用了定位而不是浮动来“清理”样式（并尝试使用jquery）：


$（'.container'）。悬停（函数（）{
var parentWidth=$（this.width（）；
var thiswitch=$（this）.find（“.child1”）.width（）+50；/*即固定框的宽度*/
如果（parentWidth
.container{
宽度：200px；
高度：50px；
边框：1px纯绿色；
溢出：隐藏；
空白：noWrap；
位置：相对位置；
}
跨度{
高度：50px；
显示：内联块；
}
.儿童2{
背景：水；
宽度：50px；
保证金：0；
位置：绝对位置；
排名：0；
右：-50px；
过渡：all.2s；
}
.儿童1{
背景：番茄；
过渡：all.2s；
位置：绝对位置；
排名：0；
左：0；
}
.container:hover.child2{
右：0；
}
.moveLeft:悬停{
左：-50px；
}

动态宽度
固定的
这是一个动态宽度框
固定的
好的，我稍微修改了LinkinTED的代码。试试这个：

当然，我不知道这是不是你可以用的东西。这些类型的问题应该用Jquery解决

.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;

    display: table;
    table-layout: fixed;
    transition: all 2s;
}
span {
   height: 50px;
   display: table-cell;
    transition: all .2s;
}
.child1 {
    background: tomato;
    width: 100%;
}
.child2 {
    background: aqua;
    width: 0px;
    overflow: hidden;
    transition: all .2s;
}
.container:hover .child2 {
    width: 50px;
}

<div class="container">
    <div class="wrapper">
        <span class="child1">Dynamic Width</span>
    </div>
    <span class="child2">Fixed</span>
</div>    
<div class="container">
    <div class="wrapper">
        <span class="child1">Here is a Dynamic Width box</span>
    </div>
    <span class="child2">Fixed</span>
</div>

.container{
宽度：200px；
高度：50px；
边框：1px纯绿色；
显示：表格；
表布局：固定；
过渡：所有2；
}
跨度{
高度：50px；
显示：表格单元格；
过渡：all.2s；
}
.儿童1{
背景：番茄；
宽度：100%；
}
.儿童2{
背景：水；
宽度：0px；
溢出：隐藏；
过渡：all.2s；
}
.container:hover.child2{
宽度：50px；
}
动态宽度
固定的
这是一个动态宽度框
固定的
这里是一个仅限于CSS的解决方案

诀窍是使用这个基本规则：

考虑并列呈现的两个或多个内联元素。
如果增加第一个图元的宽度，则第二个图元将被推到右侧

问题是您需要元素向左移动。我通过将X方向反转到子元素
scaleX（-1）
并再次反转容器来解决这个问题。


为了帮助您更好地理解这一点，您可以注释掉
转换：scaleX（-1），然后观察发生了什么

这样做的好处在于，您不需要知道
.child2
的宽度。你只需要把它推到左边


.container{
宽度：200px；
高度：50px；
边框：1px纯绿色；
溢出：隐藏；
空白：nowrap；
文本对齐：右对齐；
转换：scaleX（-1）；
}
跨度{
高度：50px；
显示：内联块；
转换：scaleX（-1）；
}
.儿童1{
背景：水；
宽度：50px；
左边距：-50px；
浮动：左；
过渡：边缘向左。2s；
文本对齐：左对齐；
}
.儿童2{
背景：番茄；
}
.container:hover.child1{
左边距：0；
}

固定的
动态宽度
固定的
这是一个动态宽度框

.container{
宽度：250px；
高度：40px；
边框：1px实读；
溢出：隐藏；
空白：nowrap；
文本对齐：右对齐；
转换：scaleX（-1）；
}
跨度{
高度：50px；
显示：内联块；
转换：scaleX（-1）；
}
.儿童1{
背景：粉红色；
宽度：50px；
左边距：-50px；
浮动：左；
过渡：左边距。3s；
文本对齐：左对齐；
}
.儿童2{
背景：#####；
}
.container:hover.child1{
左边距：0；
}

固定的
动态宽度
固定的
这是动态宽度框
@jbutler483-我更新了Demo2来演示我的意思-谢谢。仅仅使用cssI并不能让它完全好起来，但这可能会为您的答案提供一些指导：@LinkinTED不需要知道父级大小。检查我的CSS唯一答案。@Danield我添加了第二个没有CSS3转换的解决方案。谢谢这个jQuery解决方案，但我仍然不能100%确定这是不可能的CSS@Danield：我第一次看的时候也不是很确定，但现在我想通过修补我认为是不幸的（顺便说一句，我希望被证明是错的）。但是从条件来看，我不认为它是：（我不认为这是OP的意思