如何在元素旁邊浮動元素？

hei，我正在使用html/css來實現這樣的效果： this is what I'm trying to do 在我的情況下，「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小提琴，顯示了我的想法：https://jsfiddle.net/vbr3bL46/ 但是，這顯然不容易。交叉引用現在總是在這個元素的頂部，而不是它實際在文本中的位置......有沒有人有一個想法如何實現它？

來源

2015-03-25 suMi

將邊緣，您可以創建你已經代碼提琴試過嗎？ – 2015-03-25 12:41:30

剛剛添加 – suMi 2015-03-25 12:41:43

修訂FIDDLE - 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%; 
}

來源

2015-03-25 12:50:00

所以，這個答案基本上是：我必須決定是否將此文本對齊到中心，頂部或段落底部，對吧？ – suMi 2015-03-25 12:55:06

這是特別是如果您需要根據左側文本的高度將右側的文本對齊中心。如果你不需要它垂直對齊，那麼我會走一條不同的路線，只是浮動div。這僅用於垂直對齊正確的文本。 – 2015-03-25 13:00:17

是的，這個問題旨在將它與交叉引用所在的行對齊。但根據您的回答，這似乎是不可能的。 – suMi 2015-03-25 13:04:45

你需要不給浮到你的正文，並把浮動元素的HTML的頂部：

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

保證金和顏色都只是爲了更好的視野設置。

FIDDLE

EDITED：因爲它看起來我missunderstood我現在給出一個更「靈活」回答這個問題。 Youc一個使用這個屬性的容器：

.container { 

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

像這樣：FIDDLE

來源

2015-03-25 12:47:12

的結果真的不是上面顯示的圖像...... – suMi 2015-03-25 12:49:19

好吧，你說「嘿，我期待用html/css實現這樣的事情：」那麼我的解決方案就是我可以看到的圖片。然後你說：「在我的情況下」參見章節......「部分應該浮在文本的右側。」所以，圖像不是你想要達到的目標？對不起，如果我的英語不是很好，但你的問題是至少......混淆 – 2015-03-25 12:52:33

好。那麼如果你不明白，也許不會回答。但無論如何感謝。 – suMi 2015-03-25 12:58:44

你probaly必須添加一個集裝箱稍微調整結構。

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>

來源

2015-03-25 12:47:51

嘗試改變顯示和頂部

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

來源

2015-03-25 13:51:50

如何在元素旁邊浮動元素？

回答

相關問題