css - 具有 flex 问题的 Wordpress 两列事件管理器

Question

我在一个 WordPress 网站上工作，客户希望使用 WordPress 的事件管理器插件以日常格式显示他们的事件，以便事件以两列排列(这是如何现在看起来:https://ibb.co/cwfg6V)。

我尝试使用 flex 来完成这一切，但是当日期和我拥有的两列事件都被包裹在 #em-wrapper 中(默认情况下)并且我不这样做时，问题就出现了根本不想用事件/事件列来调整日期(因为它们与链接中显示的图像位于同一行。)我无法更改日期在父 div 中的放置方式，因为它由事件管理器插件处理，我唯一能做的就是为所有内容创建类。

An image of the HTML formating that I can do in for a single events

如何完成的一个简单示例。

#em-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.event_container {
   display: flex;
   flex: 1;
   flex-wrap: wrap;
   max-width: 300px;
   padding: 0 5px 30px 5px;
}

<div id="em-wrapper">
  <h1 class="event_date">1.1.2018</h1>
  <div class="event_container">An event</div>
  
  <h1 class="event_date">2.1.2018</h1>
  <div class="event_container">Another event</div>
</div>

希望大家能明白我的意思谢谢!

Answer 1

我用 flexbox 解决了这个问题。

#em-wrapper 得到:display: flex; flex 流程:换行；

....event_date 获取:flex: 1 0 100%;

....event_containe 得到:flex: 1 1 50%;