Flexbox: изображение, заставляющее элементы списка из контейнера

Использование flexbox можно обернуть текст вокруг изображения? Изображение .avatar заставляет список внизу, .user_contact_details из содержащего div. Если я изменю размер изображения, тогда он вернет текст, но я не могу этого сделать.Flexbox: изображение, заставляющее элементы списка из контейнера

Благодаря

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>&nbsp;&nbsp;Location</li> 
 
     <li><i class="fa fa-phone"></i>&nbsp;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>

источник

2016-04-09 waynejames

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>

источник

2016-04-09 21:00:27 LGSon

@waynejames Сделал Обновит e и объяснение – LGSon

@waynejames Итак, я обновил на основе ваших комментариев и добавил, как вы спросили, тогда вы все равно выбрали другой ответ, который был таким же, как мой первый ответ? ... было бы более целесообразно сообщить мне, чтобы я мог вернуться к «flex», который я уже опубликовал. – LGSon

Нет, извините, я сначала принял ваш ответ, а затем другой, поскольку я не знал, что отменил бы ваш, оба ответа верны, другие (и ваш оригинал) находятся так близко, как можно было бы использовать flex, но я используя обновленный код на основе вашего совета и только что обновленный, чтобы отметить ваш ответ как правильный. Извините за путаницу. – waynejames

вы должны следить с вложенности, если поместить текст в DIV и изображение в одном DIV, а затем два Дис в родительской DIV и вы даете ему Flexbox он должен работать :)

body { 
 
     font-size: 16px; 
 
     font-family: 'Bliss2Regular'; 
 
     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_details{ 
 
     width:100%; 
 
     text-align: center; 
 
    } 
 
    .test{ 
 
     display:flex; 
 
     flex-direction:column; 
 
    text-align: center; 
 
    } 
 
    .user_name { 
 
     font-family: 'Bliss2Bold'; 
 
     color: #2f353f; 
 
    } 
 
    .user_job_title { 
 
     font-size: 12px; 
 
     color: #72bcd4; 
 
    } 
 
    .user_contact_details { 
 
     font-size: 12px; 
 
     
 
    } 
 
    .user_contact_details ul { 
 
     list-style-type: none; 
 
     padding: 0px; 
 
    } 
 
    .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:url('http://lorempixel.com/106/106/cats') no-repeat; 
 
    }

<body> 
 
    <div class="profile_card_container"> 
 
    <div class="test"> 
 
    <div class="user_details"> 
 
     <span class="user_name">User Name</span> 
 
     <br /><span class="user_job_title">Job Title</span> 
 
    </div> 
 
    <div class="user_contact_details"> 
 
     <ul> 
 
     <li><i class="fa fa-map-marker"></i>&nbsp;&nbsp;Location</li> 
 
     <li><i class="fa fa-phone"></i>&nbsp;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 class="avatar"> 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-04-09 21:20:32 DanyCode

Flexbox: изображение, заставляющее элементы списка из контейнера

ответ

Смежные вопросы