Позиционирование в 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

Задайте свойство дисплея inline-block на теге p.

p{ 
     display: inline-block; 
    }