使用“订单”时，将2个Divs放在同一行上在flexbox中，无需调整HTML标记（CSS）而在您可以修改标记时

Question

我正在使用一个名为Divi Blog Extras的插件，该插件在CSS中使用“顺序”来定位DIV容器。我试图将两个Divs（.post-meta和.post类别）放在彼此之间，因为我已经纠正了订单，以便它与我的客户的设计相匹配，但是我正在努力使它们彼此相邻。

我尝试过浮标，内联风格和弯曲，但似乎没有任何影响它们的定位。看起来应该相对简单，但我无法按照应有的方式排队。

您是否有可以使用的建议（ 绝对将其定位 - 除非这是唯一的方法）？

这是可以看到代码的演示网站（博客文章项目）： https://miles.birdhouse-demos.com/blog/

这就是这个博客项目看起来像是开箱即用的： https://snipboard.io/hl5dqe.jpg

： https://snipboard.io/izetmy.jpg

预先感谢您！

Answer 1

您可以将这两个项目都移至新的样式中，然后将它们并排放置

<div style="
  display: flex;
  justify-content: start;
">
  <p class="post-meta">...</p>
  <div class="post-categories">...</div>
</div>

Answer 2

好吧，您可以得到这个结果。


进行以下操作：

p标记在div

<p class="post-meta"> <span class="read-time"><span class="et-pb-icon"></span>2 min read</span></p>

<div class="post-categories"><a href="https://miles.birdhouse-demos.com/category/mental-health/" target="_self" rel="category term tag" class="el_category_term el_term_mental-health">Mental Health</a></div>

将

<div class="post-categories"><a href="https://miles.birdhouse-demos.com/category/mental-health/" target="_self" rel="category term tag" class="el_category_term el_term_mental-health">Mental Healthggg</a>|<p class="post-meta"><span class="read-time"><span class="et-pb-icon"></span>2 min read</span></p></div>

中

categories {
    width: 48%!important;
    padding: 0!important;


.et_pb_post_extra.el_dbe_block_extended .post-meta {
    border-top: none;
    padding: 10px 0 0 5px!important;

}

。

categories {
    width: 100%!important;
    padding: 0!important;


.et_pb_post_extra.el_dbe_block_extended .post-meta {
    border-top: none;
    padding: 10px 0 0 5px!important;
    display:inline;

}