Question

我想在图像左侧和同一行中放置文字。

我该怎么做？

HTML：

<p class="steps">some text</p>
<img class="images"src="images/1.png" width="800">

<p class="steps">some text</p>
<img class="images"src="images/2.png" width="800">

<p class="steps">some text</p>
<img class="images"src="images/3.png" width="800">

CSS：

  .images
    {
    float : right;
    }

    .steps
    {
    float : left;

    }

但这不是这样做的。

我在文字之后得到的图像，但不是并排。我也希望文字在图像的一半高度。

我该怎么做？提前谢谢！

Answer 1

<p>是一个块元素，它强制在它之前和之后换行。将其显示更改为inline或inline-block即可。

p{
 display:inline;
}

在你的情况下

.steps
{
 float : left;
 display:inline;
}

Answer 2

<section>
    <figure>
        <img class=images src=http://i.stack.imgur.com/mYZ6I.png/>
        <figcaption class=steps>some text</figcaption>
    </figure>
    <figure>
        <img class=images src=http://i.stack.imgur.com/mYZ6I.png/>
        <figcaption class=steps>some text</figcaption>
    </figure>
    <figure>
        <img class=images src=http://i.stack.imgur.com/mYZ6I.png/>
        <figcaption class=steps>some text</figcaption>
    </figure>
    <figure>
        <img class=images src=http://i.stack.imgur.com/mYZ6I.png/>
        <figcaption class=steps>some text</figcaption>
    </figure>        
</section>

的CSS：

*{
    padding:0;
    margin:0;
}

figure{
    width:25%;
    float:left;/*you need this*/
}

Answer 3

您需要在HTML中进行一些重组。这是你的答案和DEMO

.steps {
   float: left;
   padding:0px 10px;
   vertical-align:middle;
}
.steps img{
   display:inline;
   vertical-align:middle;
}

DEMO

在同一行中显示文本旁边的图像？

3 个答案: