如何在线旁边浮动元素？

Question

hei，我希望使用html / css实现这样的目标： 在我的情况下，＆＃34;见章节......＆＃34;部分应浮动在文本的右侧。

我以为我为普通文本设置了一定的宽度，然后将引用浮动在它的右侧：像这样：

HTML：

<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ‣3, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
<div class="crossRef">see chapter bla</div>

CSS：

p{
    width: 300px;
    float: left;
}
.crossRef{
    width: 50px;
    float: left;
}

这是一个js小提琴，显示了我的想法：https://jsfiddle.net/vbr3bL46/ 但这显然不容易。交叉引用现在总是在这个元素的顶部，而不是它实际上在文本中...有没有人知道如何实现它？

Answer 1

更新的好词 - https://jsfiddle.net/vbr3bL46/8/

这样做可以让章节与引文一致。基本上<p>向右有35％的填充，然后每个引用的右边距为35％，因此它会在线移动到右边的空白区域。

HTML：

<div class="row">
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem 5 <span class="ref">see chapter 5</span> ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem 7 <span class="ref">see chapter 7</span>ipsumLorem ipsumLorem ipsumLorem ipsum</p>
</div>

CSS：

.row {
    float: left;
    width: 100%;
}
.row p {
    float: left;
    width: 100%;
    padding-right: 35%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.row .ref {
    float: right;
    margin-right: -35%;
}

Answer 2

你不需要给你的主文本浮动，并将浮动元素放在html：

之上

.crossRef{
    width: 50px;
    height:50px;
    background-color:red;
    float: left;
    margin-right:20px;
}

设置边距和颜色只是为了更好地查看。

<强> FIDDLE

已编辑：看起来我很想念我现在给出的更多＆＃34;灵活的＆＃34;回答。您可以使用具有此属性的容器：

.container {

    display: inline-flex;
  flex-flow: row wrap-reverse;
  justify-content: flex-end;
  align-items: stretch;
  align-content: flex-end;
}

喜欢这样： FIDDLE

Answer 3

您可能需要添加容器并稍微调整结构。

p {
  width: 300px;
}
.crossRef {
  width: 150px;
  float: left;
  height: 150px;
  margin-right: 1rem;
  text-align: center;
  line-height: 150px;
}

<div>
  <div class="crossRef">see chapter bla</div>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ‣3, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
    ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>

</div>

Answer 4

尝试更改显示并在顶部添加边距

p{
   width: 300px;
   float:left;    
}
.crossRef{
   margin-top:20px;
   width: 50px;
   display:inline-block;
}