如何在行旁边浮动元素？

Question

嘿，我希望使用 html/css 实现这样的目标：在我的例子中，"See chapter..." 部分应该浮动在文本的右侧。

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

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 fiddle 展示了我的想法：https://jsfiddle.net/vbr3bL46/ 但这显然并不那么容易。交叉引用现在始终位于此元素的顶部，而不是它在文本中的实际位置...有人知道如何实现它吗？

Answer 1

您不需要在主文本中使用浮动元素，而是将浮动元素放在 html:

之上

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

设置边距和颜色只是为了更好的视图。

FIDDLE

已编辑：看起来我误解了我现在给出的问题的更多 "flexible" 答案。您可以使用具有以下属性的容器：

.container {

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

像这样：FIDDLE

Answer 2

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

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 3

已更新 FIDDLE - https://jsfiddle.net/vbr3bL46/8/

这样做可以使章节与引文保持一致。基本上 <p> 向右填充了 35%，然后每个引用都有 35% 的负右边距，因此它会将它在线移动到右边的空 space。

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 4

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

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

如何在行旁边浮动元素？

How to float element next to line?

html

css

css-float