Question

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

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>

Answer 1

使用FlexBox：

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

Answer 2

尝试：

<div id="continer">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdti_7DIIq6sh7Y24zXvfeBEab5st3M_-bEitNykuSGnXUXRXu" class="lion">
<h2> നമസ്കാരം, എന്റെ പേര് അഭിജിത്ത് കെ എ.വരക്കാനും, എഴുതാനും ഇഷ്ടമാണ്.</h2>
</div>


<style>
#continer{
display: inline-block;
width: 500px;
}
h2 {    
width: 50%;
float: left;
padding: 30px 0px 0px 0px;
margin: 0 auto;
}
.lion {
width: 30%;
float: left;
padding-right: 5%;
margin: 0 auto;
position: relative;
}
</style>

如何并排设置图像和文本

2 个答案: