У меня есть два <img> и два <p> (основной текст заголовка)два изображения и две строки текста выстраиваются
Я хочу форматировать их в CSS выстраиваться так:
<img1> <img2>
<text1> <text2>
в основном, два изображения с двумя подписями под ними.
Я знаю, что это довольно просто, но все, что я пробовал, не сработало.
Это довольно основной материал:
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;
}
По сути вы обернуть изображение/текст пар в дивы и плывут дивы влево.
Вы можете сделать это с этим способом в основном:
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;
}
<!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>
так что вы пробовали? – Huangism