[英]how to display image and left side and text right side in html
Hi in the below code i want to display images left side and text should be right side.but now it's displaying down of the image .and as well as 3 images in a single line same like image with text. 嗨,在下面的代码中,我想在左侧显示图像,文本应该在右侧。但是现在它显示图像的下方。以及同一行中的3张图像,如带有文本的图像。
.specilites{ width: 1050px; margin: 0 auto 0 auto; padding-top:7px; color:#008080; font-size:30px; } .specilites img{ background-repeat: no-repeat; background-size: cover; overflow:hidden; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:90px; height:90px; display:inline-block; border: 1px solid #008080; } .specilites h1{ width: 1050px; margin: 0 auto 0 auto; padding-top:7px; color:#008080; font-size:30px; } .specilites td{ font-size:15px; display:block; }
<div class="specilites"> <table> <tr> <td> <img src="http://lorempixel.com/400/200"/> Accident & Emergency Care</td> <td><img src="http://lorempixel.com/400/200"/></td> <td> <img src="http://lorempixel.com/400/200"/><td> </tr> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> </table> </div>
Assuming you want 3 images in a single line and image left with text right to that. 假设您想在一行中显示3张图片,并在图片左侧添加文字。 DEMO Here 在这里演示
.specilites{
width: 1050px;
margin: 0 auto 0 auto;
padding-top:7px;
color:#008080;
font-size:30px;
}
.specilites img{
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
display:inline-block;
border: 1px solid #008080;
}
.specilites h1{
width: 1050px;
margin: 0 auto 0 auto;
padding-top:7px;
color:#008080;
font-size:30px;
}
.specilites td{
font-size:15px;
/* display:block;*/
}
<div class="specilites">
<table>
<tr>
<td><img src="http://lorempixel.com/400/200"/></td>
<td>Accident & Emergency Care</td>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
</tr>
<tr>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
</tr>
<tr>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
</tr>
<tr>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
</tr>
<tr>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
<td><img src="http://lorempixel.com/400/200"/></td>
</tr>
</table>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.