html - 如何在 标签中排列图像、h1 标签和 span？

Question

我使用的是 960 网格。图像应该位于左侧，文本应该出现在图像的右侧。顶部的文本位于 h1 标记中，其下方的文本较小。

并且文本应该与图像水平对齐。但是，无法弄清楚如何实现这一点。

感谢任何帮助。

li {
	list-style:none;}

.about .grid_10 ul >li img{
	float: left;
	top: 50%;
	transform: translateY(-50%);
width: 50px;
	height:50px;}

.about .grid_10 ul >li h1{
	float: left;
	font-size: 36px;
	font-family: 'OpenSans';
	font-weight: 800;
	line-height: 1.1em;
	margin-left: 20px;
	top: 50%;
	transform: translateY(-50%);}
	
.about .grid_10 ul >li h1 span{
	float: left;
	font-size: 12px;
	font-family: 'OpenSans';
	margin-top:0;}

 <div class="grid_10">
 <ul>
    <li>
        <img src="http://placehold.it/150x150" alt="My_Logo"/>
    </li>
    <li> 
        <h1>aaaaa aaaaaaa
            <br>
            <span>
                aaaaa aaaaaa  aaaaaaa aaaaaaaa
            </span>
        </h1>
    </li>                    
</ul>
</div>

Answer 1

我更改了您的 html 布局并添加了正确的 css

   
.grid_10  img {
    display: inline-block;
    float: left;
}

.grid_10  .text-container{
    display: inline-block;
    height: 150px;
    line-height: 150px;
    float: left;
    margin-left: 10px;
}

<div class="grid_10">
    <h1>aaaaa aaaaaaa</h1>
    <img src="http://placehold.it/150x150" alt="My_Logo"/>
    <span class="text-container">
        aaaaa aaaaaa  aaaaaaa aaaaaaaa
    </span>
</div>