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>

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

1 个答案: