以下是一个示例代码,演示了如何使用CSS来实现标题下方的行和图像自动计算行宽以填满容器的效果:
HTML部分:
标题
CSS部分:
.container {
text-align: center; /* 居中对齐 */
}
.line {
width: calc(100% - 40px); /* 行宽为容器宽度减去两边的间距,这里假设间距为20px */
height: 2px; /* 行高 */
background-color: #000; /* 行颜色 */
margin: 20px auto; /* 上下间距为20px,左右自动居中 */
}
img {
max-width: 100%; /* 图片最大宽度为容器宽度 */
height: auto; /* 图片高度自适应 */
}
上述代码中,.container
是包含标题、行和图像的容器,它使用text-align: center
来实现居中对齐。.line
是表示行的元素,它使用calc
来计算行宽,margin
来设置上下间距,background-color
来设置行颜色。img
是图像元素,使用max-width
来设置最大宽度为容器宽度,height
设置为auto
来实现高度自适应。
上一篇:标题无法在卡片上方停留