如何在html中显示图像和左侧以及文本右侧

Question

嗨，在下面的代码中，我想显示图像左侧，文本应该是右侧。但现在它显示的是图像。以及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>

Answer 1

假设你想在一个单一的线和图像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>