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 に答える