时间戳

首页 > 解决方案 > 如何将图片并排放置，每个图片下方都有文字？

html - 如何将图片并排放置，每个图片下方都有文字？

问题描述

我想将图片并排放置，并在每个文本下方放置文本。如果能有响应就更好了。我不知道该怎么做？有类似的问题，但我相对较新，无法真正理解它们。提前致谢。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Life in the Wild</h1>
<div class="container">
    <img src="https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg" alt="">
    <p  class = "caption">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic sit laborum, totam dolores aspernatur magnam officiis magni omnis quisquam illo quod eligendi voluptatem excepturi asperiores ut reprehenderit soluta veniam ipsa?</p>
    <img src="https://static.pexels.com/photos/66898/elephant-cub-tsavo-kenya-66898.jpeg" alt="">
    <p  class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
    <img src="https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg" alt="">
    <p  class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
    <img src="https://static.pexels.com/photos/158471/ibis-bird-red-animals-158471.jpeg" alt="">
    <p  class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
    <img src="https://static.pexels.com/photos/133459/pexels-photo-133459.jpeg" alt="">
    <p  class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
    <img src="https://static.pexels.com/photos/50988/ape-berber-monkeys-mammal-affchen-50988.jpeg" alt="">
    <p  class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
</div>

    h1 {
text-align: center;
font-family: fantasy;
font-size: 3em;
border-bottom: 2px solid pink;
border-right: 2px solid pink;
width: 400px;
box-shadow: 4px 4px 5px #888888;
}

div.container {
vertical-align: top;
display: inline-block;
text-align: center;
width: 450px;
}

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

img {
height: 300px;
width: 450px;
transition: 0.5s all ease-in-out;
border-radius: 5%;
margin: 10px;
}

img:hover {
transform: scale(1.1);
}

.caption {
display: block;
}

标签： htmlcss

解决方案

推荐阅读