css - how to display image and left side and text right side in html -


hi in below code want display images left side , text should right side.but it's displaying down of image .and 3 images in single line same image text.

.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 want 3 images in single line , image left text right that. 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> 

Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -