Question

我使用课程flag和flag-category创建了一个包含多个旗帜横幅的网页。这两个类都设置为position:absolute，以便在图像上显示它们。

现在我想将它们显示在彼此之下，这样它们就在同一条水平线上。我已尝试使用margin-left / margin-right和float:left，但未成功。

以下是代码：

.flag {
position: absolute;
font-size: .7em;
letter-spacing: 1px;
font-weight: 700;
padding: 3px 10px 3px 10px;
color: #FFF;
background-color: #f39;
border-radius: .4em 0 0 .4em;
margin: -25px -50px;
  }

<head>
<link rel='stylesheet' id='child-theme-css' href='http://vocaloid.de/wp-content/themes/Vuturize/style.css?ver=2.1.2' type='text/css' media='all' />
</head>
<body class="category">
  <div class="site-container">
    <div class="site-inner">
      <div class="content-sidebar-wrap">
        <main class="content">
          <article class="entry">
            <header class="entry-header">
              <div class="flag">Weekly VOCALOID Ranking</div>
              <div class="flag flag-category2">Daily Ranking</div>
              <div class="flag flag-category2">Events</div>
              <div class="flag flag-category2">Interviews</div>
              <div class="flag flag-category2">Merchandise</div>
              <img src="https://www.dnb.no/portalfront/bilder-dnb/mennesker/680/680-220-bedriftsmoete-3.jpg" class="attachment-post-thumbnail" />
            </header>
          </article>
        </main>
      </div>
</div></div>
</body>

Answer 1

尝试一个绝对和一个亲戚。 Har du testat med en absolute och en relative？

.flag {
position: absolute;
font-size: .7em;
letter-spacing: 1px;
font-weight: 700;
padding: 3px 10px 3px 10px;
color: #FFF;
background-color: #f39;
border-radius: .4em 0 0 .4em;
margin: -25px -50px;
  }

.flag:before {
content: ' ';
position: relative;
top: 0;
border-width: 26px 26px 0 0;
border-style: solid;
border-color: #F39 transparent transparent;
right: -26px;
}

.flag-category2:after {
border-width: 4px;
border-color: #005357 #005357 transparent transparent;
}

Answer 2

尝试为每个项目提供一个唯一的类，并在它们上应用z-index，以便它们相互叠加。

或者您可以将标志重做为列表项，并将边距应用于它们，以便它们不会像现在一样重叠。

无论哪种方式，你的div都没有足够的空间。

如何在彼此之下显示绝对div？

2 个答案: