Question

我试图将按钮放在右上角，我正在制作一个静态的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>

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

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

Answer 3

您希望为按钮留出余量，而不是填充；并且您需要认为您希望按钮位于div的右上角或html文档的右上角。

如果您希望按钮位于div的右上方：

$('#opportunity_id').off('click').on('click',callBackEnd());

function callBackEnd(ev) {

    $.ajax({
      url: "/opportunitylist/",
      type: 'GET',
      success: function(resOpportunities) {

        var $select = $('#opportunity_id');
        $select.find('option').remove();

        var count = 0;
        $select.append("<option value=''>(Choose opportunity)</option>");
        $.each(eval(resOpportunities), function(key, value) {
            $select.append('<option value=' + value[0] + '>' + value[1] + '</option>');
            count = count+1;                              
        });
      }
    }); 
}

如果您希望按钮位于页面右上方：

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

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

如何将该按钮移到div的右上方？

3 个答案: