2 divs in 1 line

Question

このdivの作成方法は、画像の後に開始されます。 コンテナの先頭から開始します。 /float：left;/profile imageに追加しました。

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>