css图文上下显示 |css数字区间的代码

元素：

<div class="container">
<img src="example.jpg" alt="example">
<p>这是一段文字说明。</p>
</div>

紧接着，大家可以使用 CSS 的 flexbox 属性来对每个容器进行布局。对于父容器，大家将其设置为“flex”布局，并设置其子元素的方向为纵向：

.container {
display: flex;
flex-direction: column;
}

这样大家就实现了图文上下排列的基本布局。接下来，大家需要对图片和文字进行进一步的布局优化。 首先，大家需要针对图片设置一些样式。其中，大家可以使用 object-fit 属性来控制图片在其容器中的尺寸和位置：

.container img {
width: 100%;
height: 300px;
object-fit: cover;
}

这样，图片就可以占据父容器的全部宽度，并按照高度比例填充其容器。 接着，大家需要对文本进行排版。大家可以对

元素设置一些样式来实现这一点：

.container p {
margin-top: 20px;
font-size: 18px;
line-height: 1.5;
}

在这里，大家将文本的字体大小设置为 18 像素，设置了一个较小的上边距（20 像素），并且将行高设置为 1.5 倍以保证文字的可读性。 最后，大家可以对容器进行局部优化，如增加内边距和设置背景色等：

.container {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #f5f5f5;
}

这样，大家就成功地实现了一种简单的图文上下排列布局。通过灵活使用 CSS 样式，大家还可以进一步完善这个效果，比如实现一些动态的交互效果、设置阴影和边框样式等。