如何将WordPress餐厅菜单插件的描述文本移至主div底部

你只需要添加以下两段CSS即可实现需求，无需修改原有HTML结构：

1. 给详情容器设置垂直弹性盒布局，保证容器可以撑满父级高度：

.wc-restaurant-menu-product .details {
  display: flex;
  flex-direction: column;
  height: 100%;
}

2. 给描述模块添加上边距自动属性，会自动将描述块推到详情容器的最底部：

.wc-restaurant-menu-product .description {
  margin-top: auto;
}

如果样式不生效，大概率是原有插件CSS优先级更高，可以在属性后加!important提升优先级：

.wc-restaurant-menu-product .details {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.wc-restaurant-menu-product .description {
  margin-top: auto !important;
}

原有方案失效原因说明 #

• position: absolute需要配合父级设置position: relative使用，且会让描述块脱离文档流，容易和上方的标题、价格按钮重叠
• position: fixed是相对于浏览器视口定位，完全不符合模块内定位的需求
• clear: both仅对浮动布局生效，当前插件的默认布局没有使用浮动，所以不会生效

该flex布局方案适配性更强，不管标题、价格的内容长度如何变化，描述都会固定在容器底部，不会出现布局错乱的问题。

内容的提问来源于stack exchange，提问作者M5_Crate