当父级宽度减小时移动内部元素

Question

很难对此主题进行解释，但是基本上我有两个div，并且当我单击按钮时为了避免任何重叠，我不移动元素，而是更改其父容器的宽度。

令人惊讶的是，屏幕右边缘的行为良好，给人一种内部元素超出屏幕的印象。

在左侧，它的工作原理不同。即使只是为了进行测试，也将内部元素更改为绝对位置。

换句话说，当我单击“运行”时，由于父级的宽度正在减小，我希望左侧文本在短时间后被推出屏幕。

这是我要实现的目标：

$("#run").on("click", function() {
  $("#cont-left, #cont-right").toggleClass("hide");
});

#cont-right {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 200px;
  overflow: hidden;
  border: 2px solid blue;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

#test {
  background: yellow;
  left: 0px;
}

#cont-left {
  position: absolute;
  top: 0px;
  height: 30px;
  left: 0px;
  width: 200px;
  overflow: hidden;
  border: 2px solid green;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

#test2 {
  background: pink;
  right: 0px;
}

#run {
  display: block;
  width: 100px;
  background: red;
  cursor: pointer;
  margin: 0 auto;
  color: white;
  padding: 10px 0px;
  text-align: center;
  font-weight: bold;
}

#run:hover {
  background: green;
}

#cont-right.hide,
#cont-left.hide {
  width: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont-right" class="hide">
  <div id="test">
    111<br />222<br />333
  </div>
</div>

<div id="cont-left" class="hide">
  <div id="test2">
    111<br/>222<br />333
  </div>
</div>
<span id="run">Run</span>

Answer 1

如果只是文本，请尝试text-align

如果仅使用文本，则只需对CSS进行更改即可解决此问题：

#cont-left {
  text-align: right;
}

如果不是，那该怎么办：那就该flex

了

如果您想使用多个文本，则应使用display: flex;，以便可以justify-content: flex-end;（将内容对齐到末尾）。您将需要将它们应用于容器#cont-left和#cont-right。对于#cont-right，请使用justify-content: flex-start;

但是，当您应用这些值时，div #test和#test2将不再占据其父级的宽度，因此，您将需要将background-color移至父级div或设置width: 100%;

下面，我修改了代码段以包含flex更改。

$("#run").on("click", function() {
  $("#cont-left, #cont-right").toggleClass("hide");
});

#cont-right {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 200px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  display: flex;
  justify-content: flex-start;
  background: yellow;
}

#cont-left {
  position: absolute;
  top: 0px;
  height: 30px;
  left: 0px;
  width: 200px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  display: flex;
  justify-content: flex-end;
  background: pink;
}

#run {
  display: block;
  width: 100px;
  background: red;
  cursor: pointer;
  margin: 0 auto;
  color: white;
  padding: 10px 0px;
  text-align: center;
  font-weight: bold;
}

#run:hover {
  background: green;
}

#cont-right.hide,
#cont-left.hide {
  width: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont-right" class="hide">
  <div id="test">
    111<br />222<br />333
  </div>
</div>

<div id="cont-left" class="hide">
  <div id="test2">
    111<br/>222<br />333
  </div>
</div>
<span id="run">Run</span>