如何定位元素，使其整齐地位于包裹线下方

Question

使用 CSS，我希望能够在有空 space 时让按钮向上移动（由于文本换行）。

下图说明了这个问题。我希望顶部按钮显示得高几个像素，因为它上面直接没有文字。

相反，它与 text-is-only-present-on-the-right 的底部对齐。

有没有办法用 CSS 实现这个（我可以更改 HTML）？

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="right">
  <button class="button-primary">Do this...</button>
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="right">
  <button class="button-primary">Do that...</button>
</div>

CSS:

div.right {
  text-align: right;
}

Answer 1

div {
  display:inline-block;
  width:100%;
  border: 1px solid #000;  
}

p {
  display:inline;
}

.button-primary {   
  float:right;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <button class="button-primary">Do this...</button>
</div>
<div>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <button class="button-primary">Do that...</button>
</div>

Answer 2

对 p 使用 display: inline;，对按钮使用 float: right;。不要将按钮放在段落中，它有点无效 html

p {
    display: inline;
}

.button-primary {
    float: right;
}

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button class="button-primary">Do this...</button>
</div>

Answer 3

试试这个。您找到了解决方案。

div{ display:inline;}

.div-2 {
    float: right;
}

<div class="div-1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div class="div-2"><input type="button" value="submit"> </div>

Answer 4

不改变你的 HTML，也许你必须使用伪 ::before:

div, p {display: inline;}

.right {
  text-align: right;
  float: right;
  clear: both;
}

p:before {
  content: '';
  display: block;
    margin-bottom: 3em;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="right">
  <button class="button-primary">Do this...</button>
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="right">
  <button class="button-primary">Do that...</button>
</div>

如何定位元素，使其整齐地位于包裹线下方

How to position an element such that it neatly rests under a wrapped line

html

css

vertical-alignment