将文本环绕按钮

Question

我试图在页面上创建一个框，主要是文本，左上角有一个小图像，右下角有一个按钮。环绕图像很好（多年来我已经这样做了几十次），但放置按钮似乎打败了我。无论我做什么，它总是将自己置于文本下方。

.profile-container {
  margin: 1em;
  padding: 1em;
  width: calc(100% - 4em);
  background: #fff;
  border: 1px solid #2c687b
}

.profile img {
  float: left;
  height: 200px;
  width: 150px;
  margin-right: 1em
}

.profile h2 {
  font-family: 'Neuropol', sans-serif;
  font-weight: 300;
  transform: scale(1, 1.3);
  margin-bottom: .5em
}

form {
  float: right;
  margin-left: 1em
}

<div class="profile-container">
  <div class="profile">
    <img src="images/paul.jpg" alt="alt" />
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie diam consectetur suscipit tincidunt. Fusce ipsum mauris, bibendum nec massa sed, sodales mollis lacus. Sed dignissim semper neque in semper.</p>
    <p>Praesent lobortis tellus quis eros mollis congue. Nunc vel turpis vel enim vehicula commodo. Duis lectus ante, viverra ut lacinia ac, varius a nunc. Vivamus odio dui, pellentesque faucibus odio et, placerat convallis leo.</p>
    <p>Curabitur et tellus vitae massa tincidunt luctus. Fusce lacus nunc, facilisis id lobortis at, lobortis sed ante. Morbi sagittis eget nisl a lobortis. Donec interdum scelerisque erat ut blandit.</p>
    <form action="reviews.php" method="post" name="reviews">
      <input name="hiddenname" type="hidden" value="hiddenvalue">
      <input type="submit" class="button" value="My Reviews">
    </form>
  </div>
</div>

这里有一个 JSFiddle： https://jsfiddle.net/yd5v7zrf/

似乎表单总是根据其顶部边缘定位，但我需要根据其底部边缘定位它。

Answer 1

似乎是一个崩溃的保证金问题。只需将 display: inline-block; 添加到 .profile 即可。

.profile-container {
  margin: 1em;
  padding: 1em;
  width: calc(100% - 4em);
  background: #fff;
  border: 1px solid #2c687b
}

.profile {
  display: inline-block;
}

.profile img {
  float: left;
  height: 200px;
  width: 150px;
  margin-right: 1em
}

.profile h2 {
  font-family: 'Neuropol', sans-serif;
  font-weight: 300;
  transform: scale(1, 1.3);
  margin-bottom: .5em
}

form {
  float: right;
  margin-left: 1em
}

<div class="profile-container">
  <div class="profile">
    <img src="images/paul.jpg" alt="alt" />
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie diam consectetur suscipit tincidunt. Fusce ipsum mauris, bibendum nec massa sed, sodales mollis lacus. Sed dignissim semper neque in semper.</p>
    <p>Praesent lobortis tellus quis eros mollis congue. Nunc vel turpis vel enim vehicula commodo. Duis lectus ante, viverra ut lacinia ac, varius a nunc. Vivamus odio dui, pellentesque faucibus odio et, placerat convallis leo.</p>
    <p>Curabitur et tellus vitae massa tincidunt luctus. Fusce lacus nunc, facilisis id lobortis at, lobortis sed ante. Morbi sagittis eget nisl a lobortis. Donec interdum scelerisque erat ut blandit.</p>
    <form action="reviews.php" method="post" name="reviews">
      <input name="hiddenname" type="hidden" value="hiddenvalue">
      <input type="submit" class="button" value="My Reviews">
    </form>
  </div>
</div>

Answer 2

将最后一段更改为跨度： https://jsfiddle.net/57a6gwyk/

<span></span>
<form style="float:right"></form>

或者只是制作段落显示：内嵌；

回应评论：

如果您将表单移至段落上方，否则保留原样怎么样：

https://jsfiddle.net/oq9pu3vy/