时间戳

首页 > 解决方案 > 显示 Flex Align 以实现响应式风格？

html - 显示 Flex Align 以实现响应式风格？

问题描述

如何将作者信息移动到头像一侧以进行响应式设计？我是使用 flex-align 还是 block ？我想更改我附上截图的论坛部分的响应式设计作者。我尝试了一些代码，但没有奏效。

https://i.imgyukle.com/2021/03/04/NJa5KG.jpg

#bbpress-forums li.bbp-body div.bbp-topic-author,
  #bbpress-forums li.bbp-body div.bbp-reply-author {
    -ms-flex-align: start;
        align-items: flex-start;
    width: 100%;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--color-divider);
    box-sizing: border-box;
  }
  .vikinger-forum-reply-author {
    -ms-flex-align: start;
        align-items: flex-start;

标签： htmlcssflexboxresponsive-designresponsive

解决方案

你可以给样式 display:flex; 到作者和头像的父元素。如果 **div.hentry ** 是您的头像和作者的父 div，并且使用此代码，它们应该并排。

#bbpress-forums li.bbp-body div.hentry {
display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:center;
}

推荐阅读