使用CSS设计名片的困难
使用CSS设计名片的困难
提问于 2016-10-14 19:04:35
我正试图制作一张名片，名片的中心是姓名和头衔，电子邮件和电话在名片上是最左边和右边的。
以下是我的代码
.business-card{
position:relative;
border:1px solid black;
width:200px;
}
.business-card section {
display:flex;
flex-flow:column;
align-items:center;
}
.email{
position:absolute;
right:0;
}<div class="business-card">
<section>
<span>
name:abc
</span>
<span>
title:xyz
</span>
</section>
<footer>
<span class="phone">
123-123-123
</span>
<span class="email">
abc@abc.com
</span>
</footer>
</div>我正在尝试包装名称/标题，但它扩展到div之外。
.business-card{
position:relative;
border:1px solid black;
width:200px;
}
.business-card section {
display:flex;
flex-flow:column;
align-items:center;
}
.email{
position:absolute;
right:0;
}<div class="business-card">
<section>
<span>
name:abcsfsdfjsdflkjsdjflssfsdfds
</span>
<span>
title:xyz
</span>
</section>
<footer>
<span class="phone">
123-123-123
</span>
<span class="email">
abc@abc.com
</span>
</footer>
</div>
有谁能帮忙一下这个PS:附件是正在开发的名片im的屏幕快照示例。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-10-14 20:09:01
.card {
border: 1px solid lightgray;
}
.title {
display: flex;
flex-direction: column;
padding: 1em;
align-items: center;
text-align: center;
word-break: break-all;
}
.title > div {
width: 50%;
}
.info {
display: flex;
padding: 2em;
}
.info > div {
flex: 1;
}
.info > div:nth-child(2) {
text-align: right;
}<div class="card">
<div class="title">
<div>Name: eDesignary</div>
<div>Title: Source code platform!</div>
</div>
<div class="info">
<div>Hyderabad</div>
<div>edesignary@gmail.com</div>
</div>
</div>
如果你的问题解决了，请告诉我。
Stack Overflow用户
发布于 2016-10-14 19:39:07
获得一个codepen.io帐户>搜索“名片”，然后根据他人的笔创建类似的东西。你可以用这种方式学习其他你通常不知道的方法。
至于这个，我可能会用500 As做一个DIV。
图片将占用div的50%的高度，然后相应地格式化您的文本
Stack Overflow用户
发布于 2016-10-14 22:49:13
当我们键入名字时，我们在第一名、中间名和姓氏之间加上空格。假设这些都不是很长，我们可以简单地通过将“对齐项”与“文本对齐”交换来使您的代码工作。
HTML：
<div class="business-card">
<section>
<span>
name:abcsfs dfjsd flkjsdj flssfsdfds
</span>
<span>
title:xyz xyz xyz xyz xy xyz xyz xyz xyz
</span>
</section>
<footer>
<span class="phone">
123-123-123
</span>
<span class="email">
abc@abc.com
</span>
</footer>
</div>CSS：
.business-card {
position: relative;
border: 1px solid black;
width: 200px;
}
.business-card section {
display: flex;
flex-flow: column;
text-align: center;
}
.email {
position: absolute;
right: 0;
}如果这能解决你的问题，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40050363
复制相关文章
相似问题
腾讯云开发者
