0

I have two <img>and two <p>(基本的なキャプション テキスト)

css でフォーマットして、次のように並べたいと思います。

<img1>   <img2>
<text1>  <text2>

基本的に、2 つの画像とその下に 2 つのキャプションがあります。

私はこれがかなり単純であることを知っていますが、私が試したことはすべてうまくいきませんでした.

4

3 に答える 3

4

これはかなり基本的なものです:

HTML

<div>
    <img src="http://www.placekitten.com/100/100" />
    <p>Text</p>
</div>
<div>
    <img src="http://www.placekitten.com/100/100" />
    <p>Text</p>
</div>

CSS

div {
    float:left;
    text-align:center;
    margin:20px;
}

jsFiddle の例

基本的に、画像/テキストのペアを div でラップし、div を左にフロートします。

于 2013-04-17T19:49:05.390 に答える
1

基本的にこの方法でそれを行うことができます：

HTML

<ul class="images">
   <li>
       <img src="/path/to/img1" /><br/>
       <p>Your caption here</p>
   </li>
   <li>
       <img src="/path/to/img2" /><br/>
       <p>Your caption here</p>
   </li>
</ul>


CSS

.images{
  list-style-type:none;
}
.images li{
   float:left;
}
于 2013-04-17T19:49:00.623 に答える
0 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img-caption
{
float:left;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>
<div class="img-caption">
<img src="image-name.gif" width="95" height="84" alt="" /><br>
CSS is fun!
</div>

<div class="img-caption">
<img src="image-name.gif" width="95" height="84" /><br>
CSS is fun!
</div>

</body>
</html>
于 2013-04-17T19:54:05.523 に答える