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

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

1 голос
/ 09 апреля 2019

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

Ответы [ 3 ]

2 голосов
/ 09 апреля 2019

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

<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>
1 голос
/ 09 апреля 2019

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

.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>
0 голосов
/ 09 апреля 2019

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...