Question

我希望按钮位于黑匣子的左下角。但是，如果我要这样做，按钮会出现在浏览器的左下角。

.taskboxone {
  background: rgba(0, 0, 0, 0.4);
  height: 200px;
  width: 375px;
  float: left;
  margin-top: 50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.taskboxtwo {
  background-color: rgba(0, 0, 0, 0.4);
  height: 200px;
  width: 375px;
  float: right;
  margin-top: 50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.boxformatting {
  margin-top: 10px;
  margin-left: 10px;
}

.buttonformatting {
  position: absolute;
  left: 10px;
  bottom: 10px;
}

<div class="bodycontent">
  <div class="taskboxone">
    <div class="boxformatting">
      <div style="font-size:27px;">Divide 10/2</div>
      <div>Click the button below to divide 10/2.</div>
    </div>
    <a href="./tentwo">
      <button class="buttonstyle buttonformattin">Do 10/2!</button>
    </a>
  </div>

  <div class="taskboxtwo">
    <div class="boxformatting">
      <div style="font-size:27px;">Divide 10/0</div>
      <div>Click the button below to divide 10/0.</div>
      <p>
    </div>
    <a href="./tenzero"><button class="buttonstyle buttonformatting">Do 10/0!</button></a>
  </div>
</div>

如何在此示例中将按钮放置在黑框的左下角{@ 1}}和taskboxone。

Answer 1

这样做

＆＃13;

.taskboxone {
  background: rgba(0, 0, 0, 0.4);
  height: 200px;
  width: 375px;
  float: left;
  margin-top: 50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.taskboxtwo {
  background-color: rgba(0, 0, 0, 0.4);
  height: 200px;
  width: 375px;
  float: right;
  margin-top: 50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



.buttonformatting {
  position: relative;
  left: 10px;
  top: 105px;
}

＆＃13;

<div class="bodycontent">
        <div class="taskboxone">
            <div class="boxformatting">
                <div style="font-size:27px;">Divide 10/2</div>
                <div>Click the button below to divide 10/2.</div>
            </div>
            <a href="./tentwo" "><button class="buttonstyle buttonformatting">Do 10/2!</button></a>
        </div>

        <div class="taskboxtwo">
            <div class="boxformatting">
                <div style="font-size:27px;">Divide 10/0</div>
                <div>Click the button below to divide 10/0.</div><p>
            </div>
            <a href="./tenzero"><button class="buttonstyle buttonformatting">Do 10/0!</button></a>
        </div>
</div>

＆＃13;

Answer 2

其他答案会给您答案，但不能解决您设计中的根本问题。 - 这可能是有原因的..但一般来说，人们不再使用旧式的html了。您应该更改您的设计模式以使用html5。

这是一个解决方案，完全重写您的设计 - 我认为这解决了您尝试使用花车的问题：https://jsfiddle.net/thrbtp8s/

HTML

<content>
  <section class=tasks>
    <article class=task-card id=task-10-2>
      <h2>Divide 10/2</h2>
      <p class=instructions>Click the button below to divide 10/2</p>
      <div class=controls>
        <button>Do 10/2!</button>
      </div>
    </article>
    <article class=task-card id=task-10-0>
      <h2>Divide 10/0</h2>
      <p class=instructions>Click the button below to divide 10/0 (watch out!)</p>
      <div class=controls>
        <button>Do 10/0!</button>
      </div>
    </article>
  </section>
</content>

CSS

:root {
  font-family: serif;
  font-size: 12pt;
}

.tasks {
  display: flex;
}

.task-card {
  background: grey;
  font-size: 1.2rem;
  padding: 1rem;
  margin: 1rem;
  height: 200px;
  width: 375px;
  display: flex;
  flex-direction: column;
}

.task-card p {
  flex: 1;
  /* greedily consume excess space in column */
}

.task-card h2 {
  margin: 0;
}

button {
  font-size: 0.8rem;
}

Answer 3

你的代码有问题加上我添加了一些css希望这是你正在寻找的

＆＃13;

.taskboxone {
      background:rgba(0, 0, 0, 0.4);
      height:200px;
      width:375px;
      float:left;
      margin-top:50px;
      box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      position: relative;
    }
    
    .taskboxtwo {
      background-color:rgba(0, 0, 0, 0.4);
      height:200px;
      width:375px;
      float:right;
      margin-top:50px;
      box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      position: relative;
    }
    
    .boxformatting {
      margin-top:10px;
      margin-left:10px;
      
    }
    
    .buttonformatting {
      position:absolute;
      left:10px;
      bottom:10px;
    }
.taskboxtwo a {
    position: absolute;
    bottom: -10px;
    left: 0px;
    display: inline-block;
    width: 85px;
}

.taskboxone a {
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: inline-block;
    width: 85px;
}

＆＃13;

<div class="bodycontent">
    		<div class="taskboxone">
    			<div class="boxformatting">
    				<div style="font-size:27px;">Divide 10/2</div>
    				<div>Click the button below to divide 10/2.</div>
    			</div>
    			<a href="./tentwo">
          <button class="buttonstyle buttonformattin">Do 10/2!
          </button>
          </a>
    		</div>
    		
    		<div class="taskboxtwo">
    			<div class="boxformatting">
    				<div style="font-size:27px;">Divide 10/0</div>
    				<div>Click the button below to divide 10/0.</div>
    			</div>
    			<a href="./tenzero"><button class="buttonstyle buttonformatting">Do 10/0!</button></a>
    		</div>
    </div>

＆＃13;

Answer 4

改变你的CSS。

.taskboxone {
  position: relative;
  background:rgba(0, 0, 0, 0.4);
  height:200px;
  width:375px;
  float:left;
  margin-top:50px;
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.taskboxtwo {
  position: relative;
  background-color:rgba(0, 0, 0, 0.4);
  height:200px;
  width:375px;
  float:right;
  margin-top:50px;
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.boxformatting {
  position: absolute;
  margin-top:10px;
  margin-left:10px;
}

.buttonstyle{
 text-align:right;
 position: absolute;
 bottom: 0; 
 right: 0; 

}

如何将按钮定位到div角落？

4 个答案:

HTML

CSS