0

这是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. 完成所有这些后，当我重新调整浏览器窗口的大小时，如何让每个图像及其对应的文本相对于它们的原始位置移动？
4

2 回答 2

1

inline-block将p标签的显示属性设置为。

   p{
      display: inline-block;
    }
于 2013-05-04T10:06:10.143 回答
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

于 2013-05-04T10:18:53.603 回答