我正在开发一个布局,其中左侧有一些文本,右侧有一个图像。在它们下面,我有三个较小的图像。我想对齐左侧文本和右侧图像,使它们都与底部图像垂直对齐。
这是我当前的布局:
如图所示:
• 左侧的文字高于底部图像。
• 右侧的大图像也高于底部图像。
我想要实现的目标:
• 我希望左侧的文本与底部图像垂直对齐。
• 我还希望右侧的大图像与底部图像垂直对齐。
• 文本和图像之间的间隙应恰好为 160 像素。
我尝试过调整边距和填充,但无法正确对齐。 CSS 中实现这种对齐的最佳方法是什么?
我创建了一个小提琴来演示这个问题:https://jsfiddle.net/fptL74bx/ 我认为需要在fiddle中的CSS代码的以下部分中进行必要的调整。
.intro {
display: flex;
padding-top: 160px;
justify-content: center;
我将此行添加到 jsfillde 中的 css 中
.description{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main {
background-color: green;
padding: 0 55px;
}
.section {
display: flex;
width: 100%;
gap: 40px;
justify-content: space-between;
padding-bottom: 160px;
}
并且还删除了 p 高度。
您可以尝试这样做,使文本向左移动,图像向右移动:
justify-content: space-between;
要在文本和图像之间添加空格,您可以使用
gap
属性
gap: 160px;
你的代码应该是这样的
.intro {
display: flex;
padding-top: 160px;
justify-content: space-between;
gap: 160px;
我希望这个解决方案能够解决您的问题。如果没有,请随时提供更多详细信息或进一步澄清您的问题。