3 回答

TA貢獻2041條經驗 獲得超4個贊
不要絕對定位元素,利用彈性布局和對齊選項。
div#content {
position: relative;
width: 80%;
margin: 1em auto;
border: 1px solid black;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
div#menu {
height: 50px;
width: 80%;
border: 1px solid black;
text-align: center;
margin: 0 auto;
}
div#recenter {
line-height: 20px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
margin: 10px;
padding: 0px 10px;
background-color: aliceblue;
}
div#geolocation {
line-height: 20px;
text-align: center;
border: 1px solid black;
margin: 10px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>

TA貢獻1788條經驗 獲得超4個贊
當您單擊地理位置并將其隱藏時,您還可以將居中按鈕移至底部。這不是一個很好的方法,但它確實有效。
div#content {
position: relative;
width: 100%;
border: 1px solid black;
height: 500px;
bottom: 0px;
}
div#menu {
position: absolute;
height: 125px;
width: 100%;
border: 1px solid black;
bottom: 0px;
line-height: 125px;
text-align: center;
}
div#recenter {
line-height: 50px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
position: absolute;
margin: 10px;
padding: 0px 20px;
bottom: 180px;
background-color: aliceblue;
}
div#geolocation {
line-height: 50px;
text-align: center;
border: 1px solid black;
position: absolute;
margin: 10px;
bottom: 125px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';document.getElementById('recenter').style.bottom = '125px';">MENU (CLICK ME)</div>
</div>

TA貢獻1784條經驗 獲得超8個贊
將地理位置和最近的 div 包裝在一個 div 中,并給它們一個類。然后使用 calc 和 flex 來實現您的要求,如下所示。不需要使用positionCSS bottom,對于這種情況來說這是一個非常糟糕的做法??鞓返慕鉀Q方案:)
div#content{
position:relative;
width:100%;
border:1px solid black;
height:500px;
bottom:0px;
}
div#menu{
position:absolute;
height:125px;
width:100%;
border:1px solid black;
bottom:0px;
line-height:125px;
text-align:center;
}
#recenter{
padding:10px;
border:1px solid #000;
max-width:120px;
border-radius:30px;
text-align:center;
background-color: aliceblue;
}
#geolocation{
line-height:50px;
text-align:center;
border: 1px solid black;
margin:10px;
background-color: aliceblue;
}
.upper_div{
height: calc(100% - 125px);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div id="content">
<div class=upper_div>
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU</div>
</div>
- 3 回答
- 0 關注
- 132 瀏覽
添加回答
舉報