Question

所以这有点令人费解。

.features {
  margin-top: 10px;
  min-height: 400px;
  border: 1px solid #8C8C8C;
  border-radius: 7px;
  color: #4A4A4A;
  overflow: hidden;
}
.bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="features">

  <p class='new-question'>Placeholder text</p>

  <div class='row'>
    <div class='bottom-right'>

      <button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
      <button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>

    </div>
  </div>

</section>

我只想让按钮显示在功能部分右下角的一行中。但他们并没有这样做，而是完全超越了这一部分。有什么想法吗？

这就是它现在的样子（忽略文字，我用js生成它）：

Answer 1

将position: relative添加到.features。每当您想根据父级移动position: absolute子元素时，必须向父级添加position: relative。

绝对位置：

元素相对于其第一个定位（非静态）祖先元素
定位

＆＃13;

.features {
  margin-top: 10px;
  min-height: 400px;
  border: 1px solid #8C8C8C;
  border-radius: 7px;
  color: #4A4A4A;
  overflow: hidden;
  position: relative;
}

.bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="features">

  <p class = 'new-question'> Placeholder text</p>
  <div class = 'bottom-right'>
    <button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
    <button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>
  </div>
</section>

＆＃13;

Answer 2

将import java.util.Scanner; public class MakingChange { public static void main(String[] args) { Scanner input = new Scanner(System.in); // Reading from System.in System.out.print("How much money do you have: "); double amountInDollars = 0; String amountInString = input.nextLine(); boolean isValidNum = false; if (amountInString.equals("") || amountInString.equals(" ")) { // Empty string check System.out.println("Empty String"); } else if (amountInString.matches("-?\\d+(\\.\\d+)?")) { // valid double check amountInDollars = Double.parseDouble(amountInString); isValidNum = true; } else { System.out.println("Number Format error"); } if (isValidNum) { int amountInPennies = (int) Math.round(amountInDollars * 100); amountInPennies = (int) (Math.round(amountInPennies / 5.0) * 5); // toonies int numberofToonies = (int) (amountInPennies / 200.00); amountInPennies = amountInPennies % 200; // loonies int numberofLoonies = (int) (amountInPennies / 100.00); amountInPennies = amountInPennies % 100; // quarters int numberofQuarters = (int) (amountInPennies / 25.00); amountInPennies = amountInPennies % 25; // dimes int numberofDimes = (int) (amountInPennies / 10.00); amountInPennies = amountInPennies % 10; // nickels int numberofNickels = (int) (amountInPennies / 5.00); System.out.println("toonies:" + numberofToonies + ";" + " loonies:" + numberofLoonies + ";" + " quarters:" + numberofQuarters + ";" + " dimes:" + numberofDimes + ";" + " nickels:" + numberofNickels); } } }设为.features

＆＃13;

position:relative

＆＃13;

.features {
margin-top: 10px;
min-height: 400px;
border: 1px solid #8C8C8C;
border-radius: 7px;
color: #4A4A4A;
overflow: hidden;
  position:relative;
}

.bottom-right{
position: absolute;
bottom: 0;
right: 0;

}

＆＃13;

Answer 3

在父元素上缺少position:relative

＆＃13;

.features {
margin-top: 10px;
min-height: 400px;
border: 1px solid #8C8C8C;
border-radius: 7px;
color: #4A4A4A;
overflow: hidden;
position:relative;
}

.bottom-right{
position: absolute;
bottom: 0;
right: 0;

}

＆＃13;

<section class="features">

            <p class = 'new-question'> Placeholder text</p>

            <div class='row'>
            <div class = 'bottom-right'>

            <button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
            <button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>


            </div>
            </div>

    </section>

＆＃13;

Answer 4

这就是绝对位置，您使用相对或绝对定位相对于下一个父元素定位元素。它会一直回到html元素本身，这意味着如果没有这样的父元素，它将相对于页面本身放置。因此，您需要相对于其父级之一添加位置，在您希望将其添加到部分功能的代码中。

Answer 5

.bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;
}

这段代码对我有用，但是当我想将其中一些放置在我的网站上时，它们最终都处于折叠之上，彼此重叠。为了防止这种情况，我将每个部分（包括右下角的div）包装在一个容器中，如下所示：

<section id="contact">
  <div class="container">
    <div class="card">...{my code}...</div>
    <div class="bottom-right">...</div>
  </div>
</section>

试图将引导按钮带到该部分的右下角，但它将它带到该部分之外。为什么？

5 个答案: