两个文本框对齐到底部,第二个可以长大并推动第一个div
问题描述:
我有两个文本框必须对齐到父div的底部。第二个div可以改变他的身高,然后它会推动第一个div。两个文本框对齐到底部,第二个可以长大并推动第一个div
我的两个问题是:
- 对准两格的底部
- 推第一个div起来的时候第二个div增长
说明图:
.parent{
width: 100%;
position: relative;
height: 500px;
}
.div1{
width: 100%;
position: relative;
}
.div2-helper{
height: 150px;
width: 100%;
position: relative;
}
.div2{
width: 100%;
position: relative;
transform: translateY(-100%);
top: 100%;
}
答
包裹div
个容器内,并使用position: absolute
和bottom: 0
我已经为您创建一个工作示例。点击按钮增加下方div的高度并检查自己。
$(".btn").click(function() {
$(".second-div").height(parseInt($(".second-div").height(), 10) + 10);
});
.parent {
background-color: grey;
position: relative;
width: 200px;
height: 200px;
}
.btn {
height: 20px;
background-color: #fff;
margin-top: 20px;
text-align: center;
cursor: pointer;
}
.container {
position: absolute;
bottom: 0;
width: 200px;
}
.first-div {
height: 30px;
width: 200px;
background-color: blue;
}
.second-div {
height: 20px;
width: 200px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="btn">Click to increase height
</div>
<div class="container">
<div class="first-div">
</div>
<div class="second-div">
</div>
</div>
</div>
后UR与HTML –
完整的代码试图做最后的努力给我们提供了一个工作(甚至没有)的HTML代码块,你有了已经 – Banzay