1
フレックスボックスを使用すると、イメージの周りにテキストを折り返すことはできますか？画像.avatarは、下部にあるリストを強制的に含んでおり、包含するdivのうち.user_contact_detailsです。画像のサイズを変更すると、テキストが取り込まれますが、できません。フレックスボックス：イメージがコンテナからリストアイテムを強制的に外す
おかげ
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>
@waynejamesをUPDATメイドeと説明 – LGSon
@waynejamesあなたのコメントに基づいて更新し、あなたがどのように尋ねたのかを追加しましたが、あなたはまだ私の最初の答えと同じ別の答えを選んだのですか？ ...私が知っているより適切であったので、私が既に投稿した 'flex'に戻ることができました。 – LGSon
申し訳ありませんが、最初にあなたの答えを受け入れました、そして、あなたのマークを解除することを知らなかったもう一つは、両方の答えが正しい、他の（そしてあなたのオリジナル）はフレックスを使うことができるほど近いですが、アドバイスに基づいて更新されたコードを使用して、あなたの答えを正しいものとしてマークするように更新しました。混乱させて申し訳ありません。 – waynejames