css - 使用 CSS 将段落放在一边

Question

我正在使用 Jekyll 撰写博文在 kramdown 的 Markdown 中图书馆。我有一个包含 "content that is tangentially related to the content around the aside element, and which could be considered separate from that content." 的 true aside旁白在逻辑上与我的博客文章的第一段相吻合。我想放在第一段旁边，最好是在它的中间。

问题是，我怎样才能将旁边的部分移到第一段中？

我的 HTML(为简单起见，我已将 markdown 翻译成 HTML):

<article>
  <h1>Blog Title</h1>
  <p>My first paragraph...</p>
  <aside>
    <h3>Aside Heading</h3>
    <p>Aside content...</p>
  </aside>
  <p>My second paragraph...</p>
</article>

我的 CSS:

aside
{
  float: right;
  background-color: grey;
  border: 1px solid black;
  width: 20em;
  padding: 1em;
}

我想要这样的东西:

Blog Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac consequat erat, eu
Vestibulum ante ipsum primis in faucibus orci luctus      +---------------+
et ultrices posuere cubilia Curae; Quisque pellentesque   | Aside here    |
pretium felis, et adipiscing ante dapibus eget. Aenean    |               |
nec lacinia eros.                                         |               |
                                                          |               |
Sem fringilla, id venenatis sem semper. Aenean malesuada  |               |
mi ac est convallis adipiscing. Sed vitae turpis congue   +---------------+
nulla ornare malesuada eget ac mi. Phasellus congue porttitor ultrices. Duis posuere
lorem at ipsum lacinia auctor. Aliquam pulvinar sollicitudin lectus sed vestibulum.

我试过/不能做:

1. 将 aside 移到第一段上方不是一个选项，因为当帖子在 RSS 阅读器中显示时，aside 会被忽略并且看起来像一个普通段落。如果它是第一个，那么它会出现在第一段之前并且没有任何意义。
2. 我不能将 aside 嵌套在段落中间，因为:
   • aside 是 block 级元素，嵌套在 <p> 中是无效的元素
   • Kramdown 不允许我在段落中放置旁白。 (因为它知道它是一个 block 级元素？)当我尝试时，html 被转义，以便“
     ...”出现在读者面前。
   • 在 RSS 阅读器中阅读时，旁白内容会出现在我的第一段中间，毫无意义。
3. 相对位置没有帮助，因为文本环绕着 aside 在文档中的原始位置。
4. 我的阅读/搜索建议使用负数 margin-top会工作，但事实并非如此。段落文本不会环绕它。我认为这是因为 aside 在 DOM 中的段落之后。

您可以在 JSFiddle 上看到我尝试使用负边距并尝试使用它.

令我惊讶的是，margin top 不起作用，因为在旧版本的 Pownce.com 上的类似示例中，负的 margin left 似乎起作用了，您可以在 http://web.archive.org/web/20071224051229/http://www.pownce.com/ 上看到它。在页面下方的部分位置，挂锁图像留有负边距，可以将其滑出文本正文，并且文本会正确换行。

Answer 1

我认为 future 解决这个问题的方式将是 CSS Exclusions .

CSS Exclusions extend the notion of content wrapping previously limited to floats. ... Elements layout their inline content in their content area and wrap around the exclusion areas in their associated wrapping context (--excerpts from the spec)

这msdn article还解释了排除

...web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats. Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.

具有讽刺意味的是，到目前为止这只适用于 IE10(寻找 wrap-flow:both here )

checkout this fiddle在 IE10+ 中

aside
{
    -ms-wrap-flow: both;
    -ms-wrap-margin: 10px;
    position: absolute;
    right:0;
    top:120px;
}

因为仍然缺乏跨浏览器支持，我将上面的代码包装在一个媒体查询中，该媒体查询只能在 IE10+ 中执行，这样绝对定位就不会弄乱 float:right 属性，它是在其他浏览器中使用。 (参见 this impressive webs article)

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
    aside
    {
        -ms-wrap-flow: both;
        -ms-wrap-margin: 10px;
        position: absolute;
        right:0;
        top:120px;
    }
}

关于浏览器支持:

查看 this site它显示浏览器支持哪些属性(迄今为止:只有 IE10+ 支持 wrap-flow:both )

PS:有关 CSS 排除(以及其他类似模块，如 CSS 区域和 CSS 形状)的最新更新可在 Adob​​e Web Platform Team Blog 找到。