仅在碰撞时推动相邻元件的移动元件

Question

我有一个有2个孩子的容器.

一个孩子有动态宽度,最大宽度可以填充容器

另一个孩子有固定的宽度,并开始隐藏,因为它的起始点是overflow:hidden容器的右侧

我想要的是固定宽度的孩子向左移动,以便它完全适合容器的右侧

a)如果两个孩子都装入容器 - 另一个元素应该放在左边和

b)如果两个元素都没有空间 - 固定宽度元素应尽可能多地将另一个元素推向左侧,以便装入容器的右侧.

这是我尝试过的:

尝试#1

.container {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  overflow: hidden;
  white-space: noWrap;
}
span {
  height: 50px;
  display: inline-block;
}
.child1 {
  background: aqua;
  float: right;
  width: 50px;
  margin-right: -50px;
  transition: margin .2s;
}
.container:hover .child1 {
  margin-right: 0;
}
.child2 {
  background: tomato;
  //width: 100%;  

}

<div class="container">
  <span class="child1">Fixed</span>
  <span class="child2">Dynamic Width</span>
</div>

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

条件a)成功但条件b)失败

尝试#2

.container {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  overflow: hidden;
  white-space: noWrap;
}
span {
  height: 50px;
  display: inline-block;
}
.child2 {
  background: aqua;
  width: 50px;
  margin: 0;
  float: right;
  margin-right: -50px;
  transition: margin .2s;
}
.container:hover .child1 {
  margin-left: -50px;
}
.container:hover .child2 {
  margin: 0;
}
.child1 {
  background: tomato;
  transition: margin .2s;
}

<div class="container">
  <span class="child1">Dynamic Width</span>
  <span class="child2">Fixed</span>
</div>

<div class="container">

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

条件a)失败和条件b)成功

只用CSS就可以满足这两个条件吗？

PS:我在演示中提供的标记可能会被修改.包括flexbox在内的CSS3也没问题.

Answer 1

这是一个仅限CSS的解决方案.

诀窍是使用这个基本规则:
考虑两个或多个并排呈现的内联元素.如果增加第一个元素的宽度,则第二个元素将向右推.

问题是你需要元素向左移动.我通过将X方向反转到子元素scaleX(-1)并再次重新反转容器来解决这个问题.

为了帮助您更好地理解这一点,您可以transform: scaleX(-1);在下面的jsfiddle链接中注释掉,并观察会发生什么.

这样做的好处是你不需要知道它的宽度.child2.你只需要把它推到左边.

.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    transform: scaleX(-1);
}

span {
   height: 50px;
   display: inline-block;
   transform: scaleX(-1);
}

.child1 {
    background: aqua;
    width: 50px;
    margin-left: -50px;
    float: left;
    transition: margin-left .2s;
    text-align: left;
}

.child2 {
   background: tomato;
}

.container:hover .child1 {
    margin-left: 0;
}

<div class="container">
    <span class="child1">Fixed</span>
    <span class="child2">Dynamic Width</span>
</div>

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

也在jsfiddle上

解决方案2

另一个稍微简单的解决方案是direction: rtl;在容器上使用.通过反转从内联元件的方向- [R飞行吨 ö 升 EFT,我们实现而不需要使用CSS3变换相同的效果.
见http://jsfiddle.net/epfqjtft/12/

Answer 2

由于CSS不能做条件语句(巴媒体查询),我不认为这是真正可以用CSS孤单.

更新

我已经看到,它是实际上可以使用CSS3变换(这在现代浏览器上运行).但是为了防止一些用户可能想要CSS3转换不能提供的旧版浏览器支持,无论如何我都会留在这里.

除此之外,我使用定位而不是浮动来"清理"样式(并尝试jquery):

$('.container').hover(function() {

  var parentWidth = $(this).width();
  var thisWidth = $(this).find(".child1").width() + 50; /*i.e. width of fixed box*/
  if (parentWidth < thisWidth) { /*if it doesn't fit, move it!*/
    $(this).find('.child1').addClass("moveLeft");
  }
}, function() {
  $(this).find(".child1").removeClass("moveLeft");
});

.container {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  overflow: hidden;
  white-space: noWrap;
  position: relative;
}
span {
  height: 50px;
  display: inline-block;
}
.child2 {
  background: aqua;
  width: 50px;
  margin: 0;
  position: absolute;
  top: 0;
  right: -50px;
  transition: all .2s;
}
.child1 {
  background: tomato;
  transition: all .2s;
  position: absolute;
  top: 0;
  left: 0;
}
.container:hover .child2 {
  right: 0;
}
.moveLeft:hover {
  left: -50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="child1">Dynamic Width</span>
  <span class="child2">Fixed</span>
</div>
<div class="container">
  <span class="child1">Here is a Dynamic Width box</span>
  <span class="child2">Fixed</span>
</div>

至于你的"解决方案",你必须测试它是否child + 50px是greater than父宽度,如果是,移动child1.如果不是,则不需要采取任何措施.