CSS: лучший способ расположить кнопку вправо в пределах div, когда ширина экрана превышает определенное значение - PullRequest
Новая
       0

CSS: лучший способ расположить кнопку вправо в пределах div, когда ширина экрана превышает определенное значение

0 голосов
/ 23 марта 2020

У меня есть следующее поле div:

enter image description here

<div class="requests-container">
  <div class="request-box">
    <div class="request-details">
      <h1>Table 6, 1:00PM</h1>
      <h2>
        Request made 10 min ago.
      </h2>
      <div class="status-button">
        <button type="button" class="request-button">Assistance Requested</button>
      </div>
    </div>
  </div>
</div>

.status-button {
  padding-bottom: 25px;
}

.requests-container {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-row-gap: 30px;
}

.request-box {
  border: 1px solid #999;
  height: 200px;
  width: 66%;
  border-radius: 5px;
  border-color: #a2e8dc;
  position: relative;
  background-color: white;
  font-family: Helvetica;
  box-shadow: 0 10px 6px -6px #ededed;
  -webkit-box-shadow: 0 10px 6px -6px #ededed;
  -moz-box-shadow: 0 10px 6px -6px #ededed;
}

.request-details {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-left: 40px;
}

.request-button {
  height: 50px;
  font-size: 20px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  padding: 10px 25px;
  background-size: 150% auto;
  background: linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%);
  cursor: pointer;
}

.request-details h1 {
  font-size: 30px;
  color: #28bfa6;
}

.request-details h2 {
  font-size: 22px;
}

Когда ширина экрана составляет не менее 1000 пикселей, я хочу положение кнопки в элементе div должны выглядеть следующим образом:

enter image description here

С кнопкой, центрированной вертикально в элементе div и расположенной справа от поля.

Я пытался добиться этого с помощью следующего CSS: 

@media (min-width: 1000px) {
  .status-button {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 700px;
  }
}

Приведенный выше код дает мне следующее:

enter image description here

Когда я использую отступ слева, чтобы расположить кнопку вправо, размер кнопки сжимается. Мало того, что когда я уменьшаю размер экрана, кнопка выходит из поля div:

enter image description here

Как лучше всего расположить мою кнопку в право такое, чтобы размер кнопки не уменьшался и кнопка оставалась в поле div?

Ответы [ 3 ]

1 голос
/ 23 марта 2020

Вместо position: absolute, padding и transform. Для ее решения можно использовать гибкий макет.

Использование displat: flex, flex-wrap: wrap, align-items: center и justify-content: space-between в элементе кнопки.

Итак, для элемента состояния кнопки , вы используете width: 100% и в медиа-запросе вы устанавливаете width: auto. 

.status-button {
    padding-bottom: 25px;
    width: 100%;
}

.requests-container {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-row-gap: 30px;
}

.request-box {
    border: 1px solid #999;
    height: 200px;
    width: 66%;
    border-radius: 5px;
    border-color: #a2e8dc;
    position: relative;
    background-color: white;
    font-family: Helvetica;
    box-shadow: 0 10px 6px -6px #ededed;
    -webkit-box-shadow: 0 10px 6px -6px #ededed;
    -moz-box-shadow: 0 10px 6px -6px #ededed;
}

.request-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 100%;
}

.request-button {
    height: 50px;
    font-size: 20px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    padding: 10px 25px;
    background-size: 150% auto;
    background: linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%);
    cursor: pointer;
}

.request-details h1 {
    font-size: 30px;
    color: #28bfa6;
}

.request-details h2 {
    font-size: 22px;
}
@media (min-width: 1000px) {
    .status-button {
      width: auto;
    }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Requests Page</title>
        <link rel="stylesheet" type="text/css" href="requests.css">
    </head>
    <body>
        <div class="requests-container">
            <div class="request-box">
                <div class="request-details">
                    <div>
                      <h1>Table 6, 1:00PM</h1>
                      <h2>Request made 10 min ago.</h2>
                    </div>
                    <div class="status-button">
                        <button type="button" class="request-button">Assistance Requested</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
0 голосов
/ 23 марта 2020

Просто замените в вашем файле css следующее для достижения вашей цели: 

.status-button {
margin-left: 25rem;
margin-top: -5rem;

}

и 

.request-button {
height:0;

}

0 голосов
/ 23 марта 2020

Вот простой пример на codepen https://codepen.io/themustafaomar/pen/poJOLqE?editors=1100

.requests-container {
  border: 1px solid #999;
  width: 66%;
  border-radius: 5px;
  border-color: #a2e8dc;
  position: relative;
  background-color: white;
  font-family: Helvetica;
  box-shadow: 0 10px 6px -6px #ededed;
  -webkit-box-shadow: 0 10px 6px -6px #ededed;
  -moz-box-shadow: 0 10px 6px -6px #ededed;
  padding: 30px;
  margin: auto;
}

.request-button {
  height: 50px;
  font-size: 20px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  padding: 10px 25px;
  background-size: 150% auto;
  background: linear-gradient(
    to right,
    rgba(141, 227, 227, 1) 0%,
    rgba(114, 240, 218, 1) 100%
  );
  cursor: pointer;
}

.request-details h1 {
  font-size: 30px;
  color: #28bfa6;
}

.request-details h2 {
  font-size: 22px;
}

@media (min-width: 1000px) {
  .requests-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

HTML

  <div class="requests-container">
    <div class="request-details">
      <h1>Table 6, 1:00PM</h1>
      <h2>Request made 10 min ago.</h2>
    </div>
    <div class="status-button">
      <button type="button" class="request-button">Assistance Requested</button>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...