在HTML/CSS中定位？

以下是html代码：

<div id="slider" class="images">
<img src="img/image1.png" height=200 width=200>
    <p>Image1 corresponding text here</p>    
<img src="img/image2.png" height=200 width=200>
    <p>Image2 corresponding text here</p>    
<img src="img/image3.png" height=200 width=200>
    <p>Image3 corresponding text here</p>    

图1此处对应的文本

图2此处对应的文本

图3此处对应的文本

如何将文本位置更改为图像右侧而不是图像下方

回答上述问题后，图像将堆叠在一起，因此如何将图像间隔一定的距离

一旦所有这些都完成了，当我重新调整broswer窗口的大小时，如何使每个图像及其对应的文本相对于其原始位置移动

---

在

p

标记上将显示属性设置为

inline block

   p{
      display: inline-block;
    }

---

我建议包装图像和文本：

<div id="slider" class="images">
    <div class="single-image">
        <img src="img/image1.png" height=200 width=200>
        <p>Image1 corresponding text here</p>   
    </div>

    <div class="single-image">
        <img src="img/image1.png" height=200 width=200>
        <p>Image1 corresponding text here</p>   
    </div>

    <div class="single-image">
        <img src="img/image1.png" height=200 width=200>
        <p>Image1 corresponding text here</p>   
    </div>
</div>

---

示例：

如何使文本不转到下一行，而是一直向右？（非常感谢你的帮助！：D）不用担心！我不完全明白你的意思。我想你可以增加图像包装的宽度？例子：

<div id="slider" class="images">
    <div class="single-image">
        <img src="img/image1.png" height=200 width=200>
        <p>Image1 corresponding text here</p>   
    </div>

    <div class="single-image">
        <img src="img/image1.png" height=200 width=200>
        <p>Image1 corresponding text here</p>   
    </div>

    <div class="single-image">
        <img src="img/image1.png" height=200 width=200>
        <p>Image1 corresponding text here</p>   
    </div>
</div>

.images { overflow: hidden; /* dirty way of self-clearing floats */ }

.single-image { 
    overflow: hidden;
    float: left;
    margin: 10px;
    width: 300px;
}

.single-image img { 
    float: left;
}

.single-image p {
    float: right;
    width: 90px;
}