亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當另一個 div 隱藏時移動一個 div

當另一個 div 隱藏時移動一個 div

慕姐8265434 2023-09-25 16:53:17
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';">MENU (CLICK ME)</div></div>目前,當我#geolocation在 JavaScript 中隱藏該塊時,#recenter按鈕不會移動。我想要的是,當我運行以下 jQuery 命令時:( $('#geolocation').hide(); 或在 js 中:)document.getElementById('geolocation').style.display = 'none';按鈕#recenter移動到底部(#geolocation塊所在的位置)怎么做 ?
查看完整描述

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>


查看完整回答
反對 回復 2023-09-25
?
尚方寶劍之說

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>


查看完整回答
反對 回復 2023-09-25
?
青春有我

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>


查看完整回答
反對 回復 2023-09-25
  • 3 回答
  • 0 關注
  • 132 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號