<div class="u-cover u-cover-1" > <img src="/static/artist/1656403897.jpg" > <div> <h1>歌手姓名</h1> <p>歌手简介</p> </div> </div> 怎么让图片在左边,姓名和简介在右边
时间: 2024-02-16 22:05:32 浏览: 27
你可以使用 CSS 的 `float` 属性来让图片和文本并排显示,然后使用 `display: inline-block` 让姓名和简介在同一行显示。具体的 CSS 代码如下:
```
.u-cover {
width: 100%;
overflow: hidden;
}
.u-cover img {
float: left;
margin-right: 10px;
}
.u-cover div {
display: inline-block;
}
.u-cover h1 {
font-size: 18px;
margin: 0;
}
.u-cover p {
font-size: 14px;
margin: 0;
}
```
你可以将这段代码放在页面的样式表中,或者在 HTML 中使用内联样式来应用。
相关问题
<div class="col-lg-7"> <img src="images/aaa.gif" alt="your_image_description" width="70%" height="70%"> <h3 class="mb-4">基本信息</h3> <br><br> <div class="col-sm-6 py-2"><h6>姓名: <span class="text-secondary">张雅维</span></h6></div> <div class="col-sm-6 py-2"><h6>出生日期: <span class="text-secondary">2003.3.15</span></h6></div> <div class="col-sm-6 py-2"><h6>性别: <span class="text-secondary">女</span></h6></div> <div class="col-sm-6 py-2"><h6>年龄: <span class="text-secondary">20</span></h6></div> <div class="col-sm-6 py-2"><h6>手机号码: <span class="text-secondary">12222222222</span></h6></div> <div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">2825275860@qq.com</span></h6></div> <div class="col-sm-6 py-2"><h6>学历: <span class="text-secondary">本科</span></h6></div> <div class="col-sm-6 py-2"><h6>学校: <span class="text-secondary">宁夏医科大学</span></h6></div> </div>将文字放在图片上方
您可以使用CSS中的position属性将文字放在图片上方。具体操作如下:
1. 首先,您需要将图片和文字都放在一个父容器中,例如一个div元素。
2. 然后,将图片的position属性设置为relative,以便在父容器中定位。
3. 接着,将文字的position属性设置为absolute,以便相对于父容器进行定位。
4. 最后,使用top和left属性对文字进行微调,使其位于图片的上方。
以下是示例代码:
```
<div class="parent-container">
<img src="images/aaa.gif" alt="your_image_description" width="70%" height="70%">
<h3 class="mb-4">基本信息</h3>
<div class="text-container">
<div class="col-sm-6 py-2"><h6>姓名: <span class="text-secondary">张雅维</span></h6></div>
<div class="col-sm-6 py-2"><h6>出生日期: <span class="text-secondary">2003.3.15</span></h6></div>
<div class="col-sm-6 py-2"><h6>性别: <span class="text-secondary">女</span></h6></div>
<div class="col-sm-6 py-2"><h6>年龄: <span class="text-secondary">20</span></h6></div>
<div class="col-sm-6 py-2"><h6>手机号码: <span class="text-secondary">12222222222</span></h6></div>
<div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">2825275860@qq.com</span></h6></div>
<div class="col-sm-6 py-2"><h6>学历: <span class="text-secondary">本科</span></h6></div>
<div class="col-sm-6 py-2"><h6>学校: <span class="text-secondary">宁夏医科大学</span></h6></div>
</div>
</div>
<style>
.parent-container {
position: relative;
}
img {
position: relative;
}
.text-container {
position: absolute;
top: 0;
left: 0;
}
</style>
```
您可以根据需要进行微调,以使文字和图片的布局更加美观。
<div class="col-lg-7"> <h3 class="mb-4">基本信息</h3> <div class="col-sm-6 py-2"><h6>姓名: <span class="text-secondary">张雅维</span></h6></div> <div class="col-sm-6 py-2"><h6>出生日期: <span class="text-secondary">2003.3.15</span></h6></div> <div class="col-sm-6 py-2"><h6>性别: <span class="text-secondary">女</span></h6></div> <div class="col-sm-6 py-2"><h6>年龄: <span class="text-secondary">20</span></h6></div> <div class="col-sm-6 py-2"><h6>手机号码: <span class="text-secondary">12222222222</span></h6></div> <div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">2825275860@qq.com</span></h6></div> <div class="col-sm-6 py-2"><h6>学历 <span class="text-secondary">本科</span></h6></div> <div class="col-sm-6 py-2"><h6>学校: <span class="text-secondary">宁夏医科大学</span></h6></div> </div>将字号变大
可以使用 CSS 样式来将字号变大,例如:
```
<style>
h3 {
font-size: 36px;
}
h6 {
font-size: 24px;
}
</style>
<div class="col-lg-7">
<h3 class="mb-4">基本信息</h3>
<div class="col-sm-6 py-2"><h6>姓名: <span class="text-secondary">张雅维</span></h6></div>
<div class="col-sm-6 py-2"><h6>出生日期: <span class="text-secondary">2003.3.15</span></h6></div>
<div class="col-sm-6 py-2"><h6>性别: <span class="text-secondary">女</span></h6></div>
<div class="col-sm-6 py-2"><h6>年龄: <span class="text-secondary">20</span></h6></div>
<div class="col-sm-6 py-2"><h6>手机号码: <span class="text-secondary">12222222222</span></h6></div>
<div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">2825275860@qq.com</span></h6></div>
<div class="col-sm-6 py-2"><h6>学历 <span class="text-secondary">本科</span></h6></div>
<div class="col-sm-6 py-2"><h6>学校: <span class="text-secondary">宁夏医科大学</span></h6></div>
</div>
```
这样就可以将 h3 的字号设置为 36px,h6 的字号设置为 24px,从而让整个信息块的字号变大。