标注旁边的对齐按钮

Question

如图所示，如何在标注旁边对齐按钮？

​

​

下面是我的代码：

​

.calloutS2 {
  position: relative;
  left: 7%;
}

.buttonOkS2 {
  position: relative;
  vertical-align: text-top;
  float: right;
}

.buttonObserve {
  position: relative;
  float: right;
}

<div class="calloutS2" id="callOutStep2"><b><u><font size="5">Step 2:</font></u></b>
  <p class="ps1" id="ps2">
    <font size="4">Length of unknown side =<br>Total length of unknown sides ÷ 2</font>
    <button class="buttonOkS2" id="buttonOkS2"></button>
  </p>
</div>
<div><button class="buttonObserve" id="buttonObserve"></button></div>

​

Answer 1

将您的整个内容包装在div中，然后将其显示为flex，这将使您的两个框对齐。

​

.wrapper {
  display:flex;
  align-items:center;
}
#callOutStep2 {
  border: 1px solid green;
}

<div class="wrapper">

<div class="calloutS2" id="callOutStep2"><b><u><font size="5">Step 2:</font></u></b>
  <p class="ps1" id="ps2"><font size="4">Length of unknown side =<br>Total length of unknown sides ÷ 2</font>
    <button class="buttonOkS2" id="buttonOkS2">OK</button>
  </p>
</div>
<div><button class="buttonObserve" id="buttonObserve">Let's Observe</button></div>

</div>

​

Answer 2

使用flex-box可能最容易做到这一点：

​

.callout {
  display: inline-flex;
  align-items:center;
  background:#eee;
}

.calloutS2 {
  background:#ccffcc;
  border:1px solid green;
  font-size:1em;
  display:flex;
  margin:3px 10px 3px 0;
}
.calloutS2 h1 {
  font-size:1.5em; font-weight:bold; text-decoration:underline;
  margin-top:0;
  
}


.text-wrapper {
  padding:3px;
}
.button-wrapper {
  align-self:flex-end;
  padding:3px;
}
.buttonOkS2 {
  background:red;
  color:white;
  padding:5px;
  border-radius:4px;
}

.buttonObserve {
  background:yellow;
  color:black;
  width:110px;
  height:70px;
  font-size:1.2em;
  border:4px double black;
}

<div class="callout">
  <div class="calloutS2" id="callOutStep2">
    <div class="text-wrapper">
    <h1>Step 2:</h1>
    Length of unknown side =<br>Total length of unknown sides ÷ 2
    </div>
    <div class="button-wrapper">
    <button class="buttonOkS2" id="buttonOkS2">OK</button>
    </div>
  </div>
  <div>
  <button class="buttonObserve" id="buttonObserve">Let's Observe</button>
  </div>
</div>

​

请参阅css-tricks.com上的优秀A Complete Guide to Flexbox以帮助您理解flex-box。

Answer 3

我认为使用flex可以很容易地实现这一点。此外，在我看来，浮动从来不是一种优雅的对齐元素的方式。

​

.wrapper {
  display: flex;
  flex-direction: row;
}

#callout {
  height: 75px;
  width: 150px;
  background-color: #CCFFCC;
  padding: 10px;
  margin-right: 10px;
}

.callout-button {
  background-color: #FFFF66;
  border: none;
  padding: 8px;
  height: 40px;
  align-self: center;
}

<div class="wrapper">
  <div id="callout">Callout content</div>
  <button class="callout-button">Let's Observe</button>
</div>

​

Codepen