我希望能够使用CSS将div放置在页面上的任意位置,但仍将文本换行。
到目前为止,我的代码:
.float {
position:relative;
top:50px;
float:right;
background:rgba(255, 0, 0, 0.5);
width:100%;
display:block;
}
<div class="content">
<div class="float">Stuff that should float</div>
Other content to wrap around<br>
More stuff to wrap around<br>
Even more stuff to wrap around<br>
And even more stuff to wrap around
</div>
除了在页面的顶角之外,我没有找到其他可以帮助我定位的内容,我需要将其放置在页面下方一定的位置。
依靠香草Javascript的解决方案对我来说是可以的。
我不能依靠在文本中创建一个中断来放置浮动元素,因为其中的内容可能会发生变化。
您可以使用固定位置来解决此问题。使用以下代码,最后一页上将显示浮点红色div。请参见以下代码:
.float {
position: fixed;
float: right;
background: rgba(255, 0, 0, 0.5);
width: 100%;
display: block;
bottom: 0;}
您需要使用另一个浮动元素并将其清除,以便文本可以一直流到浮动元素的下方。
示例为3.6em的伪代码,大约3行,将.float推到第四行级别。 width:100%
来自此演示中保存的您自己的代码
.content:before {
content: '';
float: right;
/*height:50px; pixel might not be the best unit here */
height: 3.6em;/* about 3 lines (3 x 1.2em) Update to your needs*/
}
.float {
clear: right;
float: right;
background: rgba(255, 0, 0, 0.5);
width: 100%;
display: block;
/* float:right:width:100% ?? */
/* do you need/mean : */text-align:right;/* ? */
}
<div class="content">
<div class="float">Stuff that should float</div>
Other content to wrap around<br> More stuff to wrap around<br> Even more stuff to wrap around<br> And even more stuff to wrap around
</div>
如果不是要跨越整个宽度,请删除width:100%
。 (请参阅像素值)
.content {
width: 250px;/* shrink it for the demo*/
border: solid;
}
.content:before {
content: '';
float: right;
height: 50px;
}
.float {
clear: right;
float: right;
background: rgba(255, 0, 0, 0.5);
}
<div class="content">
<div class="float">Stuff that should float</div>
Other content to wrap around<br> More stuff to wrap around<br> Even more stuff to wrap around<br> And even more stuff to wrap around
</div>
您无需添加换行符。需要更新.float类和要显示float元素的位置上的细微更改。它将自动包装外部内容。请检查以下代码或有效的代码段链接。
.float {
float: right;
background: rgba(255, 0, 0, 0.5);
width: 50%;
display: block;
}
<div>
Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around<span class="float">Stuff that should float | Stuff that should float | Stuff that should float | Stuff that should float | Stuff that should float | Stuff that should float</span> | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around
</div>
.float {
float: right;
background: rgba(255, 0, 0, 0.5);
width: 50%;
display: block;
}
<div class="content">
Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around | Other content to wrap around<span class="float">Stuff that should float | Stuff that should float | Stuff that should float | Stuff that should float | Stuff that should float | Stuff that should float</span> | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around | More stuff to wrap around Even more stuff to wrap around And even more stuff to wrap around
</div>