1行中的2个div

Question

如何使这个div在图片之后开始。 它从容器的开头开始。 我在个人资料图片中添加了/ float：left; /。

enter image description here

HTML和CSS代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

此代码应该适合您

.my-profiles {
    border: 1px solid #b2cbe3;
    padding: 22px;
    font-family: arial;
    display: inline-block;
}
.my-profiles img{
	max-width: 100px;
	width: 100%;
	border-radius: 50%;
	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">
	    <h2>Name</h2>
	    <h2>Age</h2>
	    <h2>City, Country</h2>
    </div>
</div>