CSS: flex 元素相互重叠

Question

我创建了一个包含多个 div 容器(事件、新闻、访谈)的网站。我希望容器显示在彼此下方。为了实现这一点，我在标志类上使用了 display: flex 和 position: absolute，但这似乎不起作用。

当我从标志中删除 position:absolute 并将其应用于 .bar 类时，元素会被拉伸(stretch)。

要以正确的高度显示彼此下方的 div，我缺少什么？

body {
  margin: 0px;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

.author-box::before,
.clearfix::before,
.entry::before,
.entry-content::before,
.footer-widgets::before,
.nav-primary::before,
.nav-secondary::before,
.pagination::before,
.site-container::before,
.site-footer::before,
.site-header::before,
.site-inner::before,
.wrap::before {
  content: ' ';
  display: table;
}
.author-box::after,
.clearfix::after,
.entry::after,
.entry-content::after,
.footer-widgets::after,
.nav-primary::after,
.nav-secondary::after,
.pagination::after,
.site-container::after,
.site-footer::after,
.site-header::after,
.site-inner::after,
.wrap::after {
  clear: both;
  content: ' ';
  display: table;
}
body {
  color: rgb(51, 51, 51);
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.625;
  margin: 0px;
  background-color: rgb(245, 245, 245);
}
.site-inner,
.wrap {
  margin: 0px auto;
  max-width: 1200px;
}
.site-inner {
  clear: both;
  padding-top: 40px;
}
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
  width: 980px;
}
.content-sidebar-sidebar .content-sidebar-wrap {
  float: left;
}
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
  float: right;
}
.content {
  float: right;
  width: 800px;
}
.content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content {
  float: left;
}
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {
  width: 580px;
}
.full-width-content .content {
  width: 100%;
}
.featured-content .entry {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgb(245, 245, 245);
  margin-bottom: 20px;
  padding: 0px 0px 24px;
}
.footer-widgets .entry {
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: rgb(102, 102, 102);
}
.entry {
  margin-bottom: 40px;
  padding: 50px 60px;
}
.content .entry {
  background-color: rgb(255, 255, 255);
}
.entry-header .entry-meta {
  margin-bottom: 24px;
}
body {
  margin: 0px;
  background: rgb(128, 128, 128);
}
.content .entry {
  border-radius: 0.3em;
  box-shadow: rgb(79, 79, 79) 5px 5px 40px;
}
input[type="search"] {
  padding: 5px 20px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  border: 1px solid rgb(76, 76, 76);
  width: 250px;
  background-color: rgb(103, 102, 102);
}
.content {
  width: 680px;
}
.site-inner,
.wrap {
  max-width: 1035px;
  padding-top: 0px;
}
.entry {
  padding: 30px 40px;
}
.entry-header {
  margin: -30px -40px;
  position: relative;
}
.entry-header .entry-title a {
  position: absolute;
  color: rgb(255, 255, 255);
  padding: 6px 40px;
  bottom: 12%;
  left: 0px;
  right: 0px;
  font-size: 0.63em;
  background: rgba(0, 0, 0, 0.701961);
}
.entry-header .entry-meta {
  position: absolute;
  color: rgb(255, 255, 255);
  padding: 5px;
  top: 9px;
  right: 0px;
  font-size: 0.7em;
  font-style: italic;
  background: rgba(0, 0, 0, 0.701961);
}
.entry-header .entry-title {
  margin-left: 40px;
}
.attachment-post-thumbnail {
  border-radius: 0.3em 0.3em 0px 0px;
}
.flag {
  font-size: 0.7em;
  font-weight: 700;
  padding: 3px 15px;
  color: rgb(255, 255, 255);
  border-radius: 0.4em 0px 0px 0.4em;
  margin: 10px 0px 0px -10px;
  white-space: nowrap;
  background-color: rgb(255, 51, 153);
}
.flag::after {
  content: ' ';
  position: absolute;
  left: 2px;
  top: 100%;
  border-width: 4px;
  border-style: solid;
  border-color: rgb(176, 0, 127) rgb(176, 0, 127) transparent transparent;
}
.flag::before {
  content: ' ';
  position: absolute;
  top: 0px;
  border-width: 26px 26px 0px 0px;
  border-style: solid;
  border-color: rgb(255, 51, 153) transparent transparent;
  right: -26px;
}
.flag-category {
  background-color: rgb(0, 176, 176);
}
.bar {
  display: flex;
  position: absolute;
}
.entry-header .bar {
  width: 680px; height: 220px; background: url(http://nintendo-online.de/img/bg-game-header-cover.png); }
  .flag-category: : before {
    right: -26px;
    border-style: solid;
    border-color: rgb(0, 176, 176) transparent transparent;
  }
  .flag-category::after {
    border-width: 0px 0px 27px 27px;
    border-color: transparent transparent rgb(0, 176, 176);
    top: 0px;
    left: -24px;
  }
  .bd.entry {
    padding-bottom: 10px;
    border-radius: 0.5em;
    border-style: solid;
    border-color: rgb(0, 197, 160);
  }
  .margt10.flag {
    margin: -33px -53px;
    text-transform: lowercase;
  }

<html>

<body class="single single-post">
  <div class="site-container">
    <div class="site-inner">
      <div class="content-sidebar-wrap">
        <main class="content">
          <article class="post type-post entry" itemscope="itemscope">
            <header class="entry-header">
              <div class="bar">
                <div class="flag flag-category">Events</div>
                <div class="flag flag-category">News</div>
                <div class="flag flag-category">Interviews</div>
              </div>
              <img width="680" height="220" src="https://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-680x220.jpg" class="attachment-post-thumbnail">
            </header>
          </article>
        </main>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

您的问题是 ::before 和 ::after 元素被绝对定位，这使它们脱离了正常流程。向 .flag 元素添加一些边距以进行补偿，或者查看使用 justify-content:space-between;

.flag {
  position: relative;
  font-size: .7em;
  font-weight: 700;
  padding: 3px 15px;
  color: #FFF;
  background-color: #f39;
  border-radius: .4em 0 0 .4em;
  margin: 10px 40px 0 -10px;
  white-space: nowrap;
}
.flag:after {
  content: ' ';
  position: absolute;
  left: 2px;
  top: 100%;
  border-width: 4px;
  border-style: solid;
  border-color: #B0007F #B0007F transparent transparent;
}
.flag:before {
  content: ' ';
  position: absolute;
  top: 0;
  border-width: 26px 26px 0 0;
  border-style: solid;
  border-color: #F39 transparent transparent;
  right: -26px;
}
.flag-category {
  background-color: #00b0b0;
}
.bar {
  display: flex;
  position: absolute;
  flex-direction: row;
  align-items: flex-start;
  /*justify-content:space-between;*/
}
.entry-header .bar {
  background: url(http://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/bg.png); 
  width: 680px; 
  height: 220px; 
  background: url(http://nintendo-online.de/img/bg-game-header-cover.png);
}
.flag-category: before {
  right: -26px;
  border-style: solid;
  border-color: #00b0b0 transparent transparent;
}
.flag-category:after {
  border-width: 0 0 27px 27px;
  border-color: transparent transparent #00b0b0;
  top: 0;
  left: -24px;
}
.flag-category2 {
  background-color: #00b0b0;
}
.flag-category2:before {
  border-color: #00b0b0 transparent transparent;
}
.flag-category2:after {
  border-width: 4px;
  border-color: #005357 #005357 transparent transparent;
}

<html>

<body class="single single-post">
  <div class="site-container">
    <div class="site-inner">
      <div class="content-sidebar-wrap">
        <main class="content">
          <article class="post type-post entry" itemscope="itemscope">
            <header class="entry-header">
              <div class="bar">
                <div class="flag flag-category">Events</div>
                <div class="flag flag-category">News</div>
                <div class="flag flag-category">Interviews</div>
              </div>
              <img width="680" height="220" src="https://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-680x220.jpg" class="attachment-post-thumbnail">
            </header>
          </article>
        </main>
      </div>
    </div>
  </div>

</body>

</html>