Отзывчивый элемент на моем сайте - PullRequest
Новая
       7

Отзывчивый элемент на моем сайте

0 голосов
/ 24 июня 2018

я знаю, что этот вопрос будет легким для многих людей, но для меня это не так, особенно я не являюсь фронт-энд-разработчиком, и у меня есть проект для моего университета, полностью зависящий от бэк-энда и имеющий простойкод переднего плана.
У меня есть 2 кнопки под 2 зелеными полями, эти кнопки должны быть посередине зеленых рамок, на моем маленьком экране моего ПК все работает нормально, и они расположены в середине моего экранакак это. введите описание изображения здесь

но если бы я использовал компьютер в моем университете, который будет использоваться при обсуждении с моим профессором, форма будет совершенно другой.
введите описание изображения здесь
посмотрите, как кнопки отодвинулись, потому что код веб-сайта не реагирует?
и вот код css для моих кнопок 

.spots .spot button{
  background-color: white; 
  color: black; 
  border: 2px solid grey;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor:pointer;
  display:block;
  float:left;
  border-radius:10px;
  position:absolute;
}
.spots .spot button:hover{
  background-color: #4CAF50;
  color: white;
}
.spots .spot #park1button{
  top:1700px;
  left:130px;
}
.spots .spot #park2button{
  top:1700px;
  left:370px;
}

HTML-код: 

<div class="normal spot">
    <h2>For Daily Customers</h2>
    <div id="park1"class="colorofback">
      <p id="park1p">spot number 1 is available</p>
    </div>
    <div id="park2" class="colorofback">
      <p id="park2p">spot number 2 is available</p>
    </div>
    <button id="park1button">click to book</button>
    <button id="park2button">click to book</button>
</div>

и, наконец, код CSS для контейнеров с 2 кнопками 

.spots{
  overflow:hidden;
  width:100%;
}
.spots h1{
  color:Teal;
  text-align:center;
}
.spots .spot{
  width:48%;
  float:left;
  padding:7px;
}
.spots .normal{
  border-right:1px solid black;
}
.spots .spot h2{
  color:#696969;
  text-align:center;
}
.spots .spot .colorofback{
  width:200px;
  height:300px;
  background-color:green;
  border-radius: 5%;
  color:white;
  text-align: center;
  font-size:40px;
  margin-left:25px;
  margin-right:10px;
  float:left;
  padding:2px;
}
.spots .spot .colorofback p{
  text-align: center;
  padding:8px;
}

, так как кнопка может отображаться всегда посередине под 2 зелеными полями, даже если я изменяю размермой экран?

1 Ответ

0 голосов
/ 24 июня 2018

Попробуйте свойство flex, с ним очень удобно работать, если только ваш проект не будет работать в некоторых старых браузерах. В вашем случае вы использовали свойство position: absolute css, которое абсолютно позиционирует ваш DOM-элемент на основе верхнего и левого значений. И я думаю, в этом причина. Удалить позицию абсолютного свойства. Никогда не используйте это, если это не необходимо. Потребность в этом свойстве совершенно иная, и его следует использовать только в том случае, если вы хотите разместить что-то примыкающее к другому Dom (например, раскрывающийся список), а также можно улучшить структуру вашего html. Основываясь на предварительном просмотре, я бы посоветовал вам разместить доступный элемент div и соответствующую кнопку внутри одного элемента div. Сделайте это для обоих и добавьте атрибут align: center для родительского div. Это выровняет все по вертикали и не изменится при изменении размера экрана.

...