Блог

Главная - Вопросы по программированию - Попытка переместить абзац в следующую строку под кнопкой с помощью CSS и гибкого окна

Попытка переместить абзац в следующую строку под кнопкой с помощью CSS и гибкого окна

#html #css #flexbox

Вопрос:

Я играю с кнопками и css, и мне интересно, есть ли способ заставить этот абзац, в котором говорится (Наведите меня), перейти под кнопку с помощью 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>

Ответ №1:

Попробуйте добавить 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>
Метки: