CSS：Flex项目彼此重叠

时间：2015-05-13 03:01:48

标签： css flexbox

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

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

我错过了以正确的高度展示彼此之下的div？

＆＃13;
＆＃13; 
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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

我认为这可能就是你所追求的。我将.flag位置更改为亲戚，并将flex-direction: column; align-items: flex-start;添加到.bar类。

我还必须从你的html中删除样式链接，以便这些样式适用，但我认为有些样式缺失。

我发现以下非常有用的https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;
＆＃13; 
.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 0 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: column;
  align-items: flex-start;
}
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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>

相关问题
最新问题