Перемещение внутреннего элемента при уменьшении родительской ширины
Трудно объяснить в теме, но в основном у меня есть два 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 в родительские дивы или установить 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>Я влюбился в флекс :D
Я начал использовать flex, но до сих пор удивляюсь, насколько он может быть полезен. Мне действительно нужно, чтобы текст оставался слева.