如何在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>