使用CSS将部分位置放在段落中

2023年9月5日 253次阅读

我正在使用
kramdown库在标记中使用
Jekyll写博客文章.我有一个真正的旁边,包含
“content that is tangentially related to the content around the aside element, and which could be considered separate from that content.”旁边逻辑上与我的博客文章的第一段.我想在第一段旁边浮动,理想情况下是它的一部分.

问题是,我怎么能把它放在一边,所以它至少是第一段的一部分？

我的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.

我试过/做不到：

>将第一段上方移到一边不是一个选项,因为当帖子显示在RSS阅读器中时,旁边会被忽略并且看起来像一个常规段落.如果它是第一个,那么它出现在第一个段落之前,没有任何意义.
>我不能把它放在段落的中间,因为：

>旁边是块级元素,它无法嵌套在< p>中.元件
> Kramdown不会让我把它放在段落中. (因为它知道它是一个块级元素？)当我尝试时,html被转义,以便读者看到“< aside> …”.
>当在RSS阅读器中阅读时,旁边的内容将出现在我的第一段中间,没有任何意义.

>位置相对没有帮助,因为文本环绕文档中的旁边原始位置.
>我的阅读/搜索建议使用负边距顶部可行,但事实并非如此.段落文本没有包围它.我假设这是因为旁边是在DOM中的段落之后.

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

我很惊讶边缘顶部不起作用,因为看起来阴影边缘在旧版本的Pownce.com上留下了类似的例子,你可以在http://web.archive.org/web/20071224051229/http://www.pownce.com/看到,在页面的一部分,挂锁图像有一个负边距留给将其滑出文本正文,文本正确包装.

最佳答案 我有一个有效的解决方案,但只有在已知/固定的旁边大小.

我已经解决了让它滚动的问题.

CSS

aside {
    position: absolute;
    top: 170px;
    right: 0px;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid black;
    width: 20em;
    height: 139px;
    padding: 1em;
    overflow: scroll;
}


h1:before {
    content: "";
    width: 2px;
    height: 150px;
    float: right;
    background-color: green;    
}

.firstp:before {
    content: "";
    width: 22em;
    height: 160px;
    float: right;
    clear: right;
    background-color: yellow;    
}

fiddle

我在第一个p,firstp中设置了一个类

然后,我需要一个浮动的右元素在p内容之前,以便它流动好.我在这个类之前使用了这个伪元素.这将是空的,并且仅用于为aside元素保留空间.这里的问题是我必须知道旁边的大小,我不知道.我已将此元素赋予黄色背景,以便您可以轻松查看正在发生的事情.

为了能够将它定位在我想要的位置,我在h3上设置了另一个伪元素.设置此元素高度,并清除前一个元素,我可以设置它的顶部位置.

最后,我在保留的空间中将位置置于绝对位置.

点赞