用CSS将段落中的一部分放在一边
我正在写一篇博客文章，用在图书馆的降价中。我有一个真实的旁白，它包含了我博客文章第一段的旁白。我想把第一段旁边的部分放在一边，最好是放在下面 问题是，我怎样才能把它移到上边，这样它至少可以部分进入第一段 我的HTML（为了简单起见，我已将标记转换为HTML）：用CSS将段落中的一部分放在一边,css,css-float,Css,Css Float,我正在写一篇博客文章，用在图书馆的降价中。我有一个真实的旁白，它包含了我博客文章第一段的旁白。我想把第一段旁边的部分放在一边，最好是放在下面 问题是，我怎样才能把它移到上边，这样它至少可以部分进入第一段 我的HTML（为了简单起见，我已将标记转换为HTML）： 我很惊讶页边空白顶部不起作用，因为在Pownce.com的一个旧版本中，负页边空白似乎起到了类似的作用，你可以在页面的一部分看到挂锁图像有一个负页边空白，可以将其滑出正文，并正确地包装文本。查看我的小提琴，了解更多信息参考-我刚刚更新显
我很惊讶页边空白顶部不起作用，因为在Pownce.com的一个旧版本中，负页边空白似乎起到了类似的作用，你可以在页面的一部分看到挂锁图像有一个负页边空白，可以将其滑出正文，并正确地包装文本。查看我的小提琴，了解更多信息参考-我刚刚更新显示多个段落向左浮动，旁边的段落向右浮动。你应该把第一段放在右边。很明显，你可以使用我给元素的边距和大小。应该不需要相对定位
博客标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。Ut ac consequat erat，欧盟
吕库斯蜥蜴同侧前庭
乌尔特里塞斯波苏尔库里亚；佩伦茨克
这是一个很好的例子。埃尼安
nec lacinia eros。
我的旁白内容
/**CSS**/
身体{
宽度：100%
}
#左{
浮动：左；
宽度：70%；
}
旁白{
宽度：23%；
背景：#ccc；
高度：200px；
浮动：对；
文本对齐：居中；
利润上限：30像素
}
我有一个可行的解决方案，但只有在已知/固定了备用大小的情况下才可行
我已经解决了让它滚动的问题
CSS
我在第一个p，第一个p设置了一个类
然后，我需要在p内容之前有一个浮动的right元素，这样它就可以正常流动了。我在这个类上使用了一个伪元素。这将是空的，并且仅用于为aside元素保留空间。这里的问题是，我必须知道侧边的大小，我不知道。我给了这个元素黄色的背景，这样你就可以很容易地看到发生了什么
为了能够定位到我想要的位置，我在h3上设置了另一个伪元素。设置此元素高度，并清除上一个元素，我可以设置它的顶部位置
最后，我在保留的空间中使用绝对位置将其放在一边。我认为未来解决这个问题的方法将是使用绝对位置
CSS排除扩展了内容包装的概念
仅限于浮动。。。元素在其内容区域中布局其内联内容，并在其关联的换行上下文中环绕排除区域（--摘录自）
这也解释了例外情况
…web作者现在可以包装文本，使其完全围绕
元素，从而避免了浮动的传统限制。
而不是限制元素向左或向右浮动
相对于它们在文档流中的位置，CSS排除可以是
位于距顶部、底部、左侧或右侧的指定距离处
包含块的右侧，而包含块的其余部分
文件流
具有讽刺意味的是，到目前为止，这只适用于IE10（寻找包裹流：两者都适用）
查看IE10+
由于仍然缺乏跨浏览器支持，我将上述代码包装在一个媒体查询中，该查询只在IE10+中执行，这样绝对定位就不会弄乱其他浏览器中使用的float:right
属性。（见附件）
关于浏览器支持：
查看浏览器支持哪些属性（到目前为止，只有IE10+支持wrap flow:both
）
PS：如果您愿意使用JavaScript，可以在Adobe上找到有关CSS排除（以及其他类似模块，如CSS区域和CSS形状）的最新更新
您可以在DOM中将该段移到一边，使其位于第一段之前。这允许在RSS阅读器中或禁用JavaScript时合理地显示旁白（作为段落下方的中间框），但在JavaScript运行时，可以轻松地将旁白浮动到浏览器中的正确位置，而无需使用太多CSS技巧
为了做到这一点，我将段落包装起来，并将其放在一个div中。wrapper div使它在许多不同的博客文章中工作变得很容易。HTML变成：
我的CSS分为三个部分。第一个零件在灰色框中设置侧边样式（无论是否移动，都适用）：
第二种方法适用于JavaScript未运行的情况，并为其提供左右边距，以便很好地抵消：
最后一部分在JavaScript运行后应用。它会将边距浮动到一边，向下推，并覆盖边距：
你可以从中看到这一切
注释掉JavaScript，然后单击run以查看未移动侧边时它的外观。要查看为什么要向下推侧边，请设置width:3px；背景颜色：绿色div.with-aside:before
上的code>，您将在按下aside之前看到浮动
感谢@vals，您可以使用：before
浮动来向下推动浮动。您可以使用形状：内容框。看看有没有灵感
放在一边{
浮动：对；
宽度：20em；
外部形状：内容框；
边缘顶部：4rem；
}
放一边，内容{
背景颜色：灰色；
边框：1px纯黑；
填充：0.1em；
边缘：1米；
}
博客标题
副标题
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”
雷普雷亨德雷特的多洛
aside
{
float: right;
background-color: grey;
border: 1px solid black;
width: 20em;
padding: 1em;
}
<body>
<h1>Blog Title</h1>
<section id="left">
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
pretium felis, et adipiscing ante dapibus eget. Aenean
nec lacinia eros.
</section>
<aside>
<p> My aside content</p>
</aside>
</body>
/** CSS **/
body {
width:100%
}
#left {
float:left;
width:70%;
}
aside {
width:23%;
background:#ccc;
height:200px;
float:right;
text-align:center;
margin-top:30px
}
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;
}
aside
{
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
position: absolute;
right:0;
top:120px;
}
@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;
}
}
<article>
<h1>Blog Title</h1>
<div class="with-aside">
<p>My first paragraph...</p>
<aside>
<h3>Aside Heading</h3>
<p>Aside content...</p>
</aside>
</div>
<p>My second paragraph...</p>
</article>
$(function () {
$('.with-aside').each(function (i, e) {
var withAside = $(e);
var aside = withAside.find('aside');
aside.detach();
aside.prependTo(withAside);
aside.addClass('floating');
withAside.addClass('floating');
});
});
aside {
background-color: grey;
border: 1px solid black;
padding: 1em;
}
aside {
margin: 0 5ex;
}
aside.floating {
float: right;
clear: right;
width: 20em;
margin: 0 0 0 1ex;
}
div.with-aside:before {
content:"";
float: right;
width: 0;
height: 3.75em; /* 3 lines (line-height is 1.25) */
}