您好,在下面的代码中,我想在左侧显示图像,文本应该在右侧。但现在它显示在图像的下方。以及一行中的 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>
最佳答案
假设您想要在一行中放置 3 张图片,图片左边是文字,右边是文字。演示 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>
关于html - 如何在html中显示图像和左侧和文本右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29384196/