Html 如何将此按钮移动到div的右上方？_Html_Css

Html 如何将此按钮移动到div的右上方？

html css

Html 如何将此按钮移动到div的右上方？,html,css,Html,Css,我试着把我的按钮放在右上角，我正在制作一个静态的youtube页面进行练习。我不想直接在角落里，我会在它周围垫上一些填充物。其他说明{ 背景色：白色；宽度：800px；高度：150像素；边缘顶部：15px； } .另一个描述.配置文件img img{ 宽度：75px；高度：75px；边界半径：50%；填充：30px；浮动：左； } .另一个描述h4{ 填充顶部：35px；文本转换：大写； } .其他说明.更多信息{ 垫面：5px； } .另一个描述.显示更多{ 颜色：灰色；

我试着把我的按钮放在右上角，我正在制作一个静态的youtube页面进行练习。我不想直接在角落里，我会在它周围垫上一些填充物

。其他说明{
背景色：白色；
宽度：800px；
高度：150像素；
边缘顶部：15px；
}
.另一个描述.配置文件img img{
宽度：75px；
高度：75px；
边界半径：50%；
填充：30px；
浮动：左；
}
.另一个描述h4{
填充顶部：35px；
文本转换：大写；
}
.其他说明.更多信息{
垫面：5px；
}
.另一个描述.显示更多{
颜色：灰色；
}
.另一个描述按钮{
浮动：对；
}


同侧韧带
2019年3月8日出版
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个非常小的节日
显示更多
订阅

您完全可以将其放置在右上角，如下所示

。其他说明{
背景色：白色；
宽度：800px；
高度：150像素；
边缘顶部：15px；
}
.另一个描述.配置文件img img{
宽度：75px；
高度：75px；
边界半径：50%；
填充：30px；
浮动：左；
}
.另一个描述h4{
填充顶部：35px；
文本转换：大写；
}
.其他说明.更多信息{
垫面：5px；
}
.另一个描述.显示更多{
颜色：灰色；
}
.另一个描述按钮{
位置：绝对位置；
顶部：20px；
右：20px；
}


同侧韧带
2019年3月8日出版
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个非常小的节日
显示更多
订阅

您是否尝试将其放在代码的上方

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


订阅
同侧韧带
2019年3月8日出版
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个非常小的节日
显示更多

您希望为按钮留出边距，而不是填充；您需要认为您希望按钮位于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>


尝试
.另一种描述{
背景色：白色；
宽度：800px；
高度：150像素；
边缘顶部：15px；
}
.另一个描述.配置文件img img{
宽度：75px；
高度：75px；
边界半径：50%；
填充：30px；
浮动：左；
}
.另一个描述h4{
填充顶部：35px；
文本转换：大写；
}
.其他说明.更多信息{
垫面：5px；
}
.另一个描述.显示更多{
颜色：灰色；
}
.另一个描述按钮{
浮动：对；
保证金：20px 20px 0px 0px；
}
订阅
同侧韧带
2019年3月8日出版
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个非常小的节日。。。

显示更多

如果希望按钮位于页面的右上角：

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


尝试
.另一种描述{
背景色：白色；
宽度：800px；
高度：150像素；
边缘顶部：15px；
}
.另一个描述.配置文件img img{
宽度：75px；
高度：75px；
边界半径：50%；
填充：30px；
浮动：左；
}
.另一个描述h4{
填充顶部：35px；
文本转换：大写；
}
.其他说明.更多信息{
垫面：5px；
}
.另一个描述.显示更多{
颜色：灰色；
}
.另一个描述按钮{
保证金：20px 20px 0px 0px；
位置：绝对位置；
右：20px；
}
订阅
同侧韧带
2019年3月8日出版
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个非常小的节日。。。

显示更多

注意：我在上面的代码中使用了内部样式表。从标记开始的代码是CSS的一部分