将文本环绕在按钮周围

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

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

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

或者只是让段落显示：内联；

回应评论：

如果你把表格移到段落上方，然后保持原样，怎么样？

https://jsfiddle.net/oq9pu3vy/