个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
所以我试图让文本靠近图像，可能像 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/
24
4
0
我正在尝试将按钮和 div 底部的一些文本对齐，就像下面的示例中的价格和 checkout 按钮一样。最好的方法是什么。我制作了一个 div，对其设置了样式以获得正确的文本和图片。我只需要将按钮附加到
将内容放置在带圆 Angular 的框 div 中以使其不会重叠的正确方法是什么？ 蓝框是白框父div 里面的内容div。我希望标题位于该父框内，以便它在顶部也有圆 Angular 。 当我尝试“溢出
让 SVG 内联 HTML 文档，带有一个 View 框“x y w h”。如何检查元素是否在 View 框内？ 通过说元素，它可以是组内的嵌套子路径等等...... 所以我想我正在寻找 SVG 的内
有没有办法检查鼠标是否在屏幕上的某个框内。我不知道将 jQuery 变量导出为整数以在 Javascript if 语句 中使用。我知道这可以通过 div 实现，但我不想使用 div 因为我需要很多这
目前我有两个带文本的 div 框 1 和 2，在第三个 div 框内将它们包含在一起。 Sometimes text in box 1 is longer than text inside box2
我是一名优秀的程序员,十分优秀！