代码之家 › 专栏 › 技术社区 › Moseleyi

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

css html javascript

Moseleyi · 技术社区 · 7 年前

很难在主题中解释,但基本上我有两个分隔符,为了避免单击按钮时出现重叠,我不移动元素,而是更改父容器的宽度。

令人惊讶的是,屏幕右边缘的那个元素表现得很好,给我们的印象是内部元素从屏幕中消失。

在左边,它的作用不一样。即使只是为了测试,将内部元素更改为绝对定位。

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

以下是我想要达到的目标:

$("#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>

1 回复 | 直到 7 年前

Andria 7 年前

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

如果您只使用文本,那么您需要对CSS进行的唯一更改是:

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

如果不是的话怎么办:那么是时候 `flex`

如果要使用的文本多于应使用的文本 display: flex; 这样你就可以 justify-content: flex-end; (将内容调整到末尾)。您需要将这些应用于容器 #cont-left 和 #cont-right . 为了 右下角 使用 justify-content: flex-start;

但是,当应用这些值时, #test 和 #test2 将不再占用其父级的宽度,因此,您将需要移动 background-color 到父级divs或set width: 100%;

下面我已经修改了代码段以包括 弯曲 变化。

$("#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>

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

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

如果不是的话怎么办:那么是时候 flex

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

如果不是的话怎么办:那么是时候 `flex`