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

Question

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

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

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

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

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

b）如果两个元素都没有空间 - 固定宽度元素应该尽可能多地将另一个元素推向左边，以便适合容器的右侧。

以下是我的尝试：

Attempt #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）失败

Attempt #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)并再次重新反转容器来解决这个问题。

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

这样做的好处是你不需要知道.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 ight t o l 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。如果没有，则不需要采取任何行动。

Answer 3

好的，我稍微更改了LinkinTED的代码。试试这个： http://jsfiddle.net/epfqjtft/9/

当然，我不知道你是否可以使用它。应该使用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>

Answer 4

＆＃13;

＆＃13;

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

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

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

.child2 {
   background: #####;
}

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

＆＃13;

<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  Dynamic Width box</span>
</div>

＆＃13;

＆＃13;

＆＃13;