2 줄 1 줄로

Question

그림 뒤에이 div를 만드는 방법. 컨테이너 시작 부분부터 시작합니다. 프로필 이미지에/float : left; /를 추가했습니다.

enter image description here

HTML과 CSS 코드 :

.profile{ 
 
    border: 1px solid #ddd; 
 
    padding: 22px; 
 
    min-height: 150px; 
 
} 
 
.profile img{ 
 
    max-width: 150px; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.profile #details{ 
 
    margin-left: 50px; 
 
}

<section class="profile"> 
 
     <img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile"> 
 
     <div id="details"> 
 
     <h1>Name</h1> 
 
     <h2>Age</h2> 
 
     <h3>City, Country</h3> 
 
     </div> 
 
    </section>

Answer 1

이 코드는 작동합니다위한

.my-profiles { 
 
    border: 1px solid #b2cbe3; 
 
    padding: 22px; 
 
    font-family: arial; 
 
    display: inline-block; 
 
} 
 
.my-profiles img{ 
 
\t max-width: 100px; 
 
\t width: 100%; 
 
\t border-radius: 50%; 
 
\t float: left; 
 
} 
 
.my-profiles .details { 
 
    overflow-x: hidden; 
 
    padding-top: 10px; 
 
    padding-left: 8px; 
 
    display: inline-block; 
 
} 
 
.my-profiles .details * { 
 
    margin: 0px; 
 
    font-size: 22px; 
 
    font-weight: 200; 
 
}

<div class="my-profiles"> 
 
    <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"> 
 
    <div class="details"> 
 
\t  <h2>Name</h2> 
 
\t  <h2>Age</h2> 
 
\t  <h2>City, Country</h2> 
 
    </div> 
 
</div>