时间戳

首页 > 解决方案 > 尝试使用 CSS 和弹性框将段落移动到按钮下的下一行

html - 尝试使用 CSS 和弹性框将段落移动到按钮下的下一行

问题描述

我在玩按钮和 css，我想知道是否有一种方法可以让这一段说 (Hover Me) 使用 flexbox 进入按钮下方。抱歉，如果这有点太模糊或者我发布了错误的代码，这是我的第一次。对未来的任何指示或提示表示赞赏。谢谢。

/*Makes the background  */

#background {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
}


/* Makes the background black when the button is hovered */

#button:hover~#background {
  background-color: black;
}


/* Centers the button and the paragraph */

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 40px;
  border: 1px solid royalblue;
  background-color: skyblue;
  transition: 1s;
  border-radius: 10px;
  margin-right: 15px;
}

button:hover {
  background-color: indigo;
  color: white;
  box-shadow: 3px -4px 10px GREY;
  transform: translateY(0.25em);
}
<section>
  <button id="button">Lights
            <br>Off!</br>
        </button>
  <p>(Hover Me)</p>
  <div id="background"></div>
</section>

标签： htmlcssflexbox

解决方案

尝试flex-direction: column;在部分添加

/*Makes the background  */

  #background {
    position:absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
  }
  /* Makes the background black when the button is hovered */

  #button:hover ~ #background {
    background-color: black;
  }
  
  /* Centers the button and the paragraph */

  section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    height:80px;
    width: 40px;
    border: 1px solid royalblue;
    background-color: skyblue;
    transition: 1s;
    border-radius: 10px;
    margin-right: 15px;
  }
  button:hover {
    background-color: indigo;
    color: white;
    box-shadow: 3px -4px 10px GREY;
    transform: translateY(0.25em);
  }
<section>
    <button id="button">Lights
        <br>Off!</br>
    </button>
    <p>(Hover Me)</p>
    <div id="background"></div>
</section>

推荐阅读