英文:
Formatting a signature card in HTML with an image
问题
我正在尝试将一张图片放在我的签名行详情旁边。然而，当我使用下面的代码时，文本的最后两行排列在签名的下方。我该如何修改这段代码？
<img src="https://via.placeholder.com/150">
<p class="Name">John Smith</p>
<p>123 Main Street</p>
<p>Anytown, USA</p>
<p>123 4567</p>
<p>johnsmith@gmail.com</p>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
p.Name {
font-weight: bold;
}
英文:
I am trying to place an image next to my signature line details. However, when I use the code below, the last two lines of the text are aligned under the signature. How can I modify the code?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
p.Name {
font-weight: bold;
}
<!-- language: lang-html -->
<img src="https://via.placeholder.com/150">
<p class="Name">John Smith</p>
<p>123 Main Street</p>
<p>Anytown, USA</p>
<p>123 4567</p>
<p>johnsmith@gmail.com</p>
<!-- end snippet -->
答案1
得分: 1
尝试这个，这里我们使用display: flex;。
.twoColumns {
display: flex;
flex-direction: row;
}
.responsive {
max-width: 100%;
height: auto;
}
.right {
max-width: 100%;
margin-left: 28px;
}
p.Name {
font-weight: bold;
}
<div class="twoColumns">
<div class="left">
<img src="https://via.placeholder.com/100">
</div>
<div class="right">
<p class="Name">John Smith</p>
<p>123 Main Street</p>
<p>Anytown, USA</p>
<p>123 4567</p>
<p>johnsmith@gmail.com</p>
</div>
</div>
英文:
Try this, Here we are using display: flex;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.twoColumns {
display: flex;
flex-direction: row;
}
.responsive {
max-width: 100%;
height: auto;
}
.right {
max-width: 100%;
margin-left: 28px;
}
p.Name {
font-weight: bold;
}
<!-- language: lang-html -->
<div class="twoColumns">
<div class="left">
<img src="https://via.placeholder.com/100">
</div>
<div class="right">
<p class="Name">John Smith</p>
<p>123 Main Street</p>
<p>Anytown, USA</p>
<p>123 4567</p>
<p>johnsmith@gmail.com</p>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论