Question

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

我想在css中格式化它们，如下所示：

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

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

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

Answer 1

这是非常基本的东西：

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 example

基本上你将你的图像/文本对包装在div中并浮动div。

Answer 2

你基本上可以这样做：

<强> 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; }

Answer 3

<!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>

两个图像和两个文本行排成一行

3 个答案: