0
我創建了一個包含多個div容器（Events，News，Interviews）的網站。我希望容器在彼此之下出現。爲了使這成爲可能，我在標誌類上使用了display: flex和position: absolute，但這似乎不起作用。CSS：Flex項目彼此重疊
當我從標誌中刪除position:absolute，並將其應用於.bar類時，元素會被拉伸。
我錯過了什麼以顯示正確的高度下彼此的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>
可以顯示CSS的一部分？ –