Как я могу переместить эту кнопку в верхнюю правую часть моего div?

Я пытаюсь поместить свою кнопку в верхний правый угол, я делаю статическую страницу YouTube для практики. Я не хочу прямо в углу, я бы дал ему некоторую прокладку вокруг него.

.anotherDescription {
  background-color: white;
  width: 800px;
  height: 150px;
  margin-top: 15px;
}

.anotherDescription .profileImg img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 30px;
  float: left;
}

.anotherDescription h4 {
  padding-top: 35px;
  text-transform: uppercase;
}

.anotherDescription .moreInfo {
  padding-top: 5px;
}

.anotherDescription .showMore {
  color: gray;
}

.anotherDescription button {
  float: right;
}

<div class = "anotherDescription">
  <div class = "profileImg"> <img src = "https://d12swbtw719y4s.cloudfront.
      net/images/UzogpLEQ/g7F4rwlJRkm 
       QBBF6j4S/Cartoon.jpeg?w=500"></div>
  <h4>loerm ipsum</h4>
  <p>Published on March 8, 2019</p>
  <p class = "moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
  <p class = "showMore">Show More</p>
  <button>Subscribe</button>
</div>

html css

09.04.2019 01:11

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете расположить его в правом верхнем углу, как показано ниже.

.anotherDescription {
  background-color: white;
  width: 800px;
  height: 150px;
  margin-top: 15px;
}

.anotherDescription .profileImg img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 30px;
  float: left;
}

.anotherDescription h4 {
  padding-top: 35px;
  text-transform: uppercase;
}

.anotherDescription .moreInfo {
  padding-top: 5px;
}

.anotherDescription .showMore {
  color: gray;
}

.anotherDescription button {
  position: absolute;
  top: 20px;
  right: 20px;
}

<div class = "anotherDescription">
  <div class = "profileImg"> <img src = "https://d12swbtw719y4s.cloudfront.
  net/images/UzogpLEQ/g7F4rwlJRkm 
   QBBF6j4S/Cartoon.jpeg?w=500"></div>
  <h4>loerm ipsum</h4>
  <p>Published on March 8, 2019</p>
  <p class = "moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
  <p class = "showMore">Show More</p>
  <button>Subscribe</button>
</div>
</div>

09.04.2019 01:15

Ответ принят как подходящий

Вы пытались поставить его выше в коде?

<div class = "anotherDescription">

  <button>Subscribe</button>

  <div class = "profileImg"> <img src = "https://d12swbtw719y4s.cloudfront.
      net/images/UzogpLEQ/g7F4rwlJRkm 
       QBBF6j4S/Cartoon.jpeg?w=500"></div>
  <h4>loerm ipsum</h4>
  <p>Published on March 8, 2019</p>
  <p class = "moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit,                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
  <p class = "showMore">Show More</p>
</div>

09.04.2019 01:31

Вместо отступа вы хотели бы добавить поле для кнопки; и вам нужно подумать, что вы хотите, чтобы кнопка находилась в правом верхнем углу div или в правом верхнем углу html-документа.

Если вы хотите, чтобы кнопка была в правом верхнем углу div:

<!DOCTYPE html>
<html>
    <head>
        <title>try</title>
        <style type = "text/css">
            .anotherDescription {
  background-color: white;
  width: 800px;
  height: 150px;
  margin-top: 15px;
}

.anotherDescription .profileImg img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 30px;
  float: left;
}

.anotherDescription h4 {
  padding-top: 35px;
  text-transform: uppercase;
}

.anotherDescription .moreInfo {
  padding-top: 5px;
}

.anotherDescription .showMore {
  color: gray;
}

.anotherDescription button {
  float: right;
  margin: 20px 20px 0px 0px;
}
        </style>
    </head>
    <body>
        <div class = "anotherDescription">
            <button>Subscribe</button>
            <div class = "profileImg"> 
                <img src = "https://d12swbtw719y4s.cloudfront.net/images/UzogpLEQ/g7F4rwlJRkmQBBF6j4S/Cartoon.jpeg?w=500">
            </div>
            <h4>loerm ipsum</h4>
            <p>Published on March 8, 2019</p>
            <p class = "moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
            </p>
            <p class = "showMore">Show More</p>
        </div>
    </body>
</html>

Если вы хотите, чтобы кнопка была в правом верхнем углу страницы:

<!DOCTYPE html>
<html>
    <head>
        <title>try</title>
        <style type = "text/css">
            .anotherDescription {
  background-color: white;
  width: 800px;
  height: 150px;
  margin-top: 15px;
}

.anotherDescription .profileImg img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 30px;
  float: left;
}

.anotherDescription h4 {
  padding-top: 35px;
  text-transform: uppercase;
}

.anotherDescription .moreInfo {
  padding-top: 5px;
}

.anotherDescription .showMore {
  color: gray;
}

.anotherDescription button {
    margin: 20px 20px 0px 0px;
    position: absolute;
    right: 20px;
}
        </style>
    </head>
    <body>
        <div class = "anotherDescription">
            <button>Subscribe</button>
            <div class = "profileImg"> 
                <img src = "https://d12swbtw719y4s.cloudfront.net/images/UzogpLEQ/g7F4rwlJRkmQBBF6j4S/Cartoon.jpeg?w=500">
            </div>
            <h4>loerm ipsum</h4>
            <p>Published on March 8, 2019</p>
            <p class = "moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
            </p>
            <p class = "showMore">Show More</p>
        </div>
    </body>
</html>

ПРИМЕЧАНИЕ. В приведенном выше коде я использовал внутреннюю таблицу стилей. Код, начинающийся с тега, является частью CSS.

09.04.2019 06:33

Другие вопросы по теме

Как сделать так, чтобы значки fa отображались в меню (без слов)

Как инвертировать альфа-канал svg

Как сделать текст невидимым, но при этом показать подчеркивание?

Как сделать, чтобы кнопки не падали вниз при открытии их содержимого?

Javascript - изменить содержимое элемента, когда радио-вход не отмечен

HTML Canvas выравнивает DIV в правом нижнем углу

Изменение цвета фона в TableCell удаляет цвет выделения, что затрудняет чтение

Как отобразить 3 сообщения подряд в pyhton с помощью html и css? Теперь он отображает каждое сообщение под последним

Как переключить класс внутри ветки (если условие)

Как разрешить пользователю публиковать изображения и документы?

Как я могу переместить эту кнопку в верхнюю правую часть моего div?

Ответы 3

Другие вопросы по теме

Похожие вопросы