我正在尝试为网站制作一份循环联系卡

Question

我目前正忙着为网站制作联系人卡片。我得到了一些具有很多位置的工作原型：相对和绝对，但每当我尝试调整父级的大小以使其响应时，它就会中断。原型只是被黑客攻击工作，代码真的很长很糟糕，所以我对你如何解决这个问题很感兴趣。我做了一个快速草图来说明我的问题。 正如你在图片中看到的，我想要一个1：1比例的圆形图片。在右边我想要一个不同背景颜色的小标题，一个关于这个人的小段落，最后是一个小页脚。如果你知道任何可以提供帮助的好框架，请随时推荐。 谢谢！

Answer 1

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;