css 图片列表 带文字

在网站的布局中，经常需要将一些图片与文字进行组合，用于呈现产品、展示画廊等。通过CSS可以实现图片列表带文字的效果，下面介绍一种常用的实现方式。

HTML结构很简单，使用ul和li标签包裹图片和文字：

<ul>
    <li>
        <img src="image1.jpg" alt="Image 1">
        <h4>Image 1</h4>
        <p>Description of Image 1.</p>
    </li>
    <li>
        <img src="image2.jpg" alt="Image 2">
        <h4>Image 2</h4>
        <p>Description of Image 2.</p>
    </li>
    <li>
        <img src="image3.jpg" alt="Image 3">
        <h4>Image 3</h4>
        <p>Description of Image 3.</p>
    </li>
</ul>

接着，使用CSS对样式进行设置，实现图片与文字的对齐和布局。

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    width: 200px;
    margin-right: 20px;
    vertical-align: top; /*使文字与图片顶部对齐*/
}

img {
    max-width: 100%;
}

h4 {
    font-size: 18px;
}

p {
    font-size: 14px;
}

上述CSS代码中，首先使用list-style、margin和padding等属性对ul进行样式清除；然后，使用inline-block属性实现li标签的行内布局，并设置固定宽度和间距；最重要的是使用vertical-align属性使文字与图片顶部对齐。针对每个元素，还可以设置图片的最大宽度和标题与描述的字体大小。

总的来说，通过以上的HTML和CSS代码，就可以快速实现带图片和文字列表的效果了。