我正在尝试为网站制作一张循环名片

Question

我目前正忙于为网站制作名片。我得到了一些具有很多位置的工作原型：相对和绝对，但是每当我尝试调整 parent 的大小以使其响应时，它就会中断。原型只是拼在一起工作，代码又长又烂，所以我很想知道你会如何解决这样的问题。我画了一个草图来说明我的问题。正如你在图片中看到的那样，我想要一张 1:1 比例的圆形图片。在右侧，我想要一个具有不同背景颜色的小标题，一个关于人物的小段落，最后是一个小页脚。如果您知道任何可以提供帮助的好框架，请随时推荐。谢谢！

Answer 1

这是一个例子。它在 CSS 中有一些像素大小，如果您的目标是不同的大小，您可能需要进行调整：

.circle {
    border: 1px solid;
    border-radius: 50%;
    height: 100%;
    background: white;
    margin: -1px 10px 0 -1px;
    float: left;
}
.panel {
    box-sizing: border-box;
    border-radius: 72px 25px 25px 72px;
    border: 1px solid;
    box-shadow: 10px red;
    width: 400px;
    height: 145px;
    background: linear-gradient(0deg, #e0e0e0 50%, #ccc 50%);
}
.title {
    box-sizing: border-box;
    border-bottom: 1px solid;
    margin-left: 72px;
    height: 15%;
}
.content {
    box-sizing: border-box;
    border-bottom: 1px solid;
    margin-left: 72px;
    height: 70%;
    font-size: smaller;
    background: #eee;
}
.icon {
    width:100px; 
    height:100px;
    margin: 14%;
}

<div class="panel">
    <div class="circle"><img class="icon" src="http://www.freeiconspng.com/uploads/profile-icon-person-user-19.png"></div>
    <div class="title">
        Lorem ipsum
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div>
</div>

我正在尝试为网站制作一张循环名片

I'm trying to make a circular contact card for a website

javascript

html

sass

contact