html - 如何并排设置图像和文本

Question

我想并排设置我的狮子图像和 h1 标签 tex。但有些事情搞砸了。不知道是什么。

h2 {	
	width:50%;	       	
	float:right;
	padding:30px 0px 0px 0px;
	margin:0 auto;
	 }
.lion {
width:10%;
	float: left;
	padding-right:30%;
	margin:0 auto;
	}

<img src="texlion-w.png" class="lion">
<h2> നമസ്കാരം, എന്റെ പേര് അഭിജിത്ത് കെ എ.വരക്കാനും, എഴുതാനും ഇഷ്ടമാണ്.</h2>
</div>

标签： htmlcss

Answer 1

使用弹性盒：

.flex{
    display: flex;
}

.flex h2{
    width:50%;          
    padding:30px 0px 0px 0px;
    margin:0 auto;
}

<div class="flex">
    <img src="http://placekitten.com/200/200" class="lion">
    <h2> നമസ്കാരം, എന്റെ പേര് അഭിജിത്ത് കെ എ.വരക്കാനും, എഴുതാനും ഇഷ്ടമാണ്.</h2>
</div>