Блог

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

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

#html #css

#HTML #css

Вопрос:

Я пытаюсь поместить свою кнопку в верхний правый угол, я создаю статическую страницу 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>

Ответ №1:

Вы пытались поместить ее сверху в коде? 

 <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>

Ответ №2:

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

 .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>

Ответ №3:

Вместо заполнения вы хотели бы указать поле для кнопки; и вам нужно подумать, что вы хотите, чтобы кнопка находилась в правом верхнем углу 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.