使用flexbox可以在图像周围包裹文字吗？该图像.avatar将列表强制.user_contact_details从包含div的底部移出。如果我更改图像大小，则会使文本重新输入，但是我不能这样做。
谢谢
body {
font-size: 16px;
font-family: 'Arial';
margin: 10px;
}
.profile_card_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 255px;
height: 150px;
padding: 10px;
border: 1px solid #d3d3d3;
box-shadow: 2px 2px 2px 2px #ededed;
}
.user_name {
font-family: 'Arial';
color: #2f353f;
}
.user_job_title {
font-size: 12px;
color: #72bcd4;
}
.user_contact_details {
font-size: 12px;
}
.user_contact_details ul {
list-style-type: none;
}
.user_contact_details ul li i {
font-size: 12px;
color: #72bcd4;
padding-right: 10px;
}
.user_contact_details ul li a {
text-decoration: none;
font-size: 12px;
color: #72bcd4;
}
.avatar {
float: right;
width: 106px;
height: 106px;
background-color: blue;/*just for snippet*/
/*url('images/avatar.png') no-repeat;*/
}<body>
<div class="profile_card_container">
<div class="user_details">
<span class="user_name">User Name</span>
<br /><span class="user_job_title">Job Title</span>
</div>
<div class="avatar">
</div>
<div class="user_contact_details">
<ul>
<li><i class="fa fa-map-marker"></i> Location</li>
<li><i class="fa fa-phone"></i> 0101 101 01 01</li>
<li><i class="fa fa-envelope-o"></i><a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
</div>
</body>flex 不会将文字环绕在图片周围，因此我将其删除，并做了一个小小的标记更改，将您的头像变成了第一个孩子。
通过向用户联系人及其项目添加填充，它现在看起来像图像中的布局。
基于标记结构，当内容和每个项目的长度发生变化时，结果可能会相差很多，因此，需要更清晰的描述以提出一个完全可行的解决方案。
关于注释的旁注：如果您的本地版本中仍然没有此代码，如本代码段中所述，那么您的一些代码可能会覆盖CSS，而不是我们可以访问的代码。此外，我们提供的代码说明了如何执行此操作，您需要了解如何将其应用于自己的代码。
body {
font-size: 16px;
font-family: 'Bliss2Regular';
margin: 10px;
}
.profile_card_container {
width: 255px;
height: 150px;
padding: 10px;
border: 1px solid #d3d3d3;
box-shadow: 2px 2px 2px 2px #ededed;
}
.user_details {
}
.user_name {
font-family: 'Bliss2Bold';
color: #2f353f;
}
.user_job_title {
font-size: 12px;
color: #72bcd4;
}
.user_contact_details {
padding-top: 30px;
font-size: 12px;
}
.user_contact_details ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.user_contact_details ul li {
padding-top: 12px;
}
.user_contact_details ul li i {
font-size: 12px;
color: #72bcd4;
}
.user_contact_details ul li a {
text-decoration: none;
font-size: 12px;
color: #72bcd4;
}
.avatar {
float: right;
width: 106px;
height: 106px;
background-color: blue;
/*url('images/avatar.png') no-repeat;*/
}<div class="profile_card_container">
<div class="user_details">
<div class="avatar"></div>
<div class="user_name">User Name</div>
<div class="user_job_title">Job Title</div>
<div class="user_contact_details">
<ul>
<li><i class="fa fa-map-marker"></i>Location</li>
<li><i class="fa fa-phone"></i>0101 101 01 01</li>
<li><i class="fa fa-envelope-o"></i><a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句