所以我试图让文本靠近图像，可能像 2px 一样远。一个人会怎么做？在框内移动文本、图像甚至按钮的最佳方式是什么。在我想要的位置。 (我附上了它现在的样子，我一直在 W3 学校玩)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 80%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 150px;
float: right;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<img src="img_avatar.png" alt="Avatar" style="width:40%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</body>
</html>最佳答案
您可以在包含的 div 上使用 flex:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 80%;
display: flex;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
flex-grow:1; /* this make the container grow to fill the rest of the row */
padding-left:10px; /* this is your gap between picture and text */
}<h2>Card</h2>
<div class="card">
<img src="https://www.fillmurray.com/g/200/300" alt="Avatar" style="width:40%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>关于html - 如何将框内的文本移动到特定位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53066566/