0

私は初心者です。default.css のコードと一緒に、index.html のメイン ページに画像を配置する方法をようやく見つけました。

次に、各画像の下にテキストを追加したいと思います。これは簡単なはずですが、うまくいくと思われるものを見つけることができません。

ここに私のHTMLコードがあります:

<div id="random">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
</div>

ここに私のCSSコードがあります:

#random{ 
     max-width: 650px
}

#random img{
    display:inline-block;
    width:80px;
}
4

4 に答える 4

1

HTML 5 figure タグはいつでも使用できます。(あなたのウェブサイトが HTML 5 標準に従っていると仮定します)。そうすれば、タグをネストしてスタイルを設定できます。

<div id="random>
    <figure>
         <img src="1.jpg"/>
         <figcaption>Your Caption</figcaption>
    </figure>
</div>

そうすれば、CSS でスタイルを設定するセレクターも使用できます。

于 2013-10-25T19:51:43.683 に答える
1

画像をコンテナーにラップし、その下にテキストを配置します。このようなもの：

http://jsfiddle.net/8xf2N/1/

<div id="random">
    <div class='img-container'>
      <img src="1.jpg" />
      <p>Image One</p>
    </div>
    <div class='img-container'>
      <img src="2.jpg" />
      <p>Image Two</p>
    </div>
    <div class='img-container'>
      <img src="3.jpg" />
      <p> Image Three</p>
    </div>
</div>

CSS:

#random{ 
     max-width: 650px
}

#random img{
    width:80px;
}

.img-container{
    display: inline-block;
}
于 2013-10-25T19:50:03.230 に答える
0

試す：

#random{ 
     max-width: 650px
}

#random .image-wrap{
    display:inline-block;
    width:80px;
}


<div id="random">
    <div class="image-wrap">
        <img src="1.jpg" />
        <p>Text for image 1</p>
    </div>
    <div class="image-wrap">
        <img src="2.jpg" />
        <p>Text for image 2</p>
    </div>
    <div class="image-wrap">
        <img src="2.jpg" />
        <p>Text for image 2</p>
    </div>
</div>
于 2013-10-25T19:46:10.337 に答える
0

画像を div でラップする必要があります。ここにフィドルがありますhttp://jsfiddle.net/a6p​​Nw/

CSS:

#random{ 
 max-width: 650px
}

#random div{
 display:inline-block;
 width:80px;
 text-align:center;
}

HTML:

<div id="random">
<div>
    <img src="http://placehold.it/80x80" />
    <p>Some text</p>
</div>
<div>
    <img src="http://placehold.it/80x80" />
    <p>Some text</p>
</div>
<div>
    <img src="http://placehold.it/80x80" />
    <p>Some text</p>
</div>

于 2013-10-25T19:51:11.500 に答える