在HTML/CSS中定位？

Question

下面是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>  

<div class="switch_image"> 
<a href="#" id="prev">Prev</a> 
<a href="#" id="next">Next</a> 

1. 我怎樣才能改變文本的位置是在圖像的右側並沒有下文了嗎？
2. 回答完上述問題後，圖像會堆疊在一起，因此如何將圖像間隔一定距離？
3. 一旦完成所有這些工作，當我重新調整瀏覽器窗口的大小時，如何獲取每個圖像以及相應的文本是否相對於原始位置移動？

Answer 1

我建議包裝的圖片和文字：

<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> 

在你的CSS

然後做這樣的事情：

.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; 
} 

例子：http://jsbin.com/alobiw/1/edit

Answer 2

在p標記上將display屬性設置爲inline-block。

p{ 
     display: inline-block; 
    }