0

我有两个<img>和两个<p>（基本字幕文本）

我想在 css 中将它们格式化为这样排列：

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

基本上，两张图片下面有两个标题。

我知道这很简单，但我尝试过的一切都没有奏效。

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 回答