首页 > css > 包裹绝对位于漂浮元素周围?

包裹绝对位于漂浮元素周围? (Wrapping absolutely positioned around floated elements?)

问题

附带的屏幕截图中,我有播客剧集,它们是固定宽度并相对定位。如您所见,播客剧集编号(绿色圆圈)完全位于播客剧集中。

但是,我还有一个侧边栏向右浮动,在这种情况下,播客节目应该围绕侧边栏,就像现在一样。

我的问题是:在这种情况下,是否有任何方法可以在边栏旁边显示相对于包装的剧集(右上角)的播客剧集编号?

HTML

<main>
    <article class="podcasts">
        <section class="podcast-episode">
            <div class="podcast-id">68</div>
        </section>
        <section class="podcast-episode">
            <div class="podcast-id">67</div>
        </section>
    </article>
    <aside class="sidebar">
        <section class="advert"></section>
        <section class="enews"></section>
    </aside>
</main>

CSS

.podcasts {
    max-width: 900px;
}

.podcast-episode {
    position: relative;
}

.podcast-id {
    position: absolute;
    top: -8px;
    right: -10px;
}

.sidebar {
    width: 300px;
    float: right;
}

这是一个更详细的示例的粗略CodePen

解决方法

试试这个。对于这一点,你必须给position:relative.podcast-episode类和删除overflow:hidden

.container{
   width:96%;
   margin:0 auto;
}
 #sidebar {
   width: 300px;
   float: right;
   margin: 0 6em 3em;
}
 article {
   display: block;
}
 .podcast {
   position: relative;
  /*max-width: 900px;*/
   margin: 4em auto;
}
 .podcast-episode {
   background-color: rgba(0,0,0,0.025);
   border-radius: 5px;
   margin-bottom: 4em;
  /*overflow: hidden;*/
   display: flex;
   flex-flow: row wrap;
   counter-increment: numbered -1;
   z-index: 1;
   position: relative;
}
 .podcast-episode:before {
   content: counter(numbered);
   position: absolute;
   top: -8px;
   right: -10px;
   background-color: #85a463;
   border-radius: 50%;
   height: 30px;
   width: 30px;
   line-height: 30px;
   text-align: center;
   color: #fff;
   font-size: 0.7em;
}
 .podcast-episode .podcast-info {
   width: 100%;
}
 .podcast-episode .podcast-image {
   width: 125px;
   height: 125px;
   float: left;
   line-height: 0;
   margin-right: 1.5em;
}
 .podcast-episode .podcast-image img {
   width: 100%;
   height: auto;
}
 .podcast-episode .podcast-title {
   font-size: 1.15em;
   margin: 0 0 0.25em;
   padding-top: 1.15em;
}
 .podcast-episode .podcast-meta {
   font-size: 0.825em;
   line-height: 1.5em;
   list-style: none;
   margin: 0;
   padding: 0;
}
 .podcast-episode .podcast-meta li {
   display: inline-block;
   margin-right: 0.75em;
}
 .podcast-episode .podcast-meta li svg {
   opacity: 0.8;
}
 .podcast-episode .podcast-summary {
   font-size: 0.9em;
   line-height: 1.5em;
   padding: 1.25em 1.5em 1.5em;
   display: none;
}
 .podcast-episode .podcast-audio {
   width: 100%;
}
<div class="container">
<aside id="sidebar">
  <div id="ad-sidebar">
    <div class="adspace">
      <a href="https://www.rioproducts.com/freshwater/fly-line" target="_blank">
      <img src="https://www.flyandstream.com/wp-content/uploads/2018/02/ad-300x600-rio.jpg" alt="Rio Products">
      </a>
      <span class="ad-meta"><a href="https://www.flyandstream.com/advertise/">Advertise with us</a></span>
    </div>
  </div>
</aside>
<article>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
</article>
</div>


问题

In the attached screenshot I have the podcast episodes which are fixed width and positioned relative. As you can see the podcast episode number (green circle) is positioned absolutely within the podcast episode.

However, I also have a sidebar floated right, in which case the podcast episode should wrap around the sidebar, as they now do.

My question is this: in this scenario, is there any way to have the podcast episode number display relative to the wrapped episode (top right corner) when next to the sidebar?

HTML

<main>
    <article class="podcasts">
        <section class="podcast-episode">
            <div class="podcast-id">68</div>
        </section>
        <section class="podcast-episode">
            <div class="podcast-id">67</div>
        </section>
    </article>
    <aside class="sidebar">
        <section class="advert"></section>
        <section class="enews"></section>
    </aside>
</main>

CSS

.podcasts {
    max-width: 900px;
}

.podcast-episode {
    position: relative;
}

.podcast-id {
    position: absolute;
    top: -8px;
    right: -10px;
}

.sidebar {
    width: 300px;
    float: right;
}

Here is a rough CodePen of the example in more detail.

解决方法

Try this. For this you have to give position:relative to .podcast-episode class and remove overflow:hidden.

.container{
   width:96%;
   margin:0 auto;
}
 #sidebar {
   width: 300px;
   float: right;
   margin: 0 6em 3em;
}
 article {
   display: block;
}
 .podcast {
   position: relative;
  /*max-width: 900px;*/
   margin: 4em auto;
}
 .podcast-episode {
   background-color: rgba(0,0,0,0.025);
   border-radius: 5px;
   margin-bottom: 4em;
  /*overflow: hidden;*/
   display: flex;
   flex-flow: row wrap;
   counter-increment: numbered -1;
   z-index: 1;
   position: relative;
}
 .podcast-episode:before {
   content: counter(numbered);
   position: absolute;
   top: -8px;
   right: -10px;
   background-color: #85a463;
   border-radius: 50%;
   height: 30px;
   width: 30px;
   line-height: 30px;
   text-align: center;
   color: #fff;
   font-size: 0.7em;
}
 .podcast-episode .podcast-info {
   width: 100%;
}
 .podcast-episode .podcast-image {
   width: 125px;
   height: 125px;
   float: left;
   line-height: 0;
   margin-right: 1.5em;
}
 .podcast-episode .podcast-image img {
   width: 100%;
   height: auto;
}
 .podcast-episode .podcast-title {
   font-size: 1.15em;
   margin: 0 0 0.25em;
   padding-top: 1.15em;
}
 .podcast-episode .podcast-meta {
   font-size: 0.825em;
   line-height: 1.5em;
   list-style: none;
   margin: 0;
   padding: 0;
}
 .podcast-episode .podcast-meta li {
   display: inline-block;
   margin-right: 0.75em;
}
 .podcast-episode .podcast-meta li svg {
   opacity: 0.8;
}
 .podcast-episode .podcast-summary {
   font-size: 0.9em;
   line-height: 1.5em;
   padding: 1.25em 1.5em 1.5em;
   display: none;
}
 .podcast-episode .podcast-audio {
   width: 100%;
}
<div class="container">
<aside id="sidebar">
  <div id="ad-sidebar">
    <div class="adspace">
      <a href="https://www.rioproducts.com/freshwater/fly-line" target="_blank">
      <img src="https://www.flyandstream.com/wp-content/uploads/2018/02/ad-300x600-rio.jpg" alt="Rio Products">
      </a>
      <span class="ad-meta"><a href="https://www.flyandstream.com/advertise/">Advertise with us</a></span>
    </div>
  </div>
</aside>
<article>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
</article>
</div>

相似信息