代码之家 › 专栏 › 技术社区 › jkrei0 Richard Henage

将div放在页面上的任意位置,但仍有文本环绕

css html javascript

jkrei0 Richard Henage · 技术社区 · 6 年前

到目前为止我的代码是:

.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的解决方案对我来说没问题。

我不能依赖于在文本中创建一个中断来放置浮动元素,因为其中的内容可能会改变。

0 回复 | 直到 6 年前

G-Cyrillus 6 年前

您需要使用另一个浮动元素并将其清除,这样文本就可以一直沿着浮动元素流动。

例如,伪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”>应该漂浮的东西</部门>
</部门>

Harshsetia 6 年前

您可以使用“固定位置”来解决此问题。使用下面的代码,浮动红色div将显示在最后一页上。请参阅下面的代码:

.float {
position: fixed;
float: right;
background: rgba(255, 0, 0, 0.5);
width: 100%;
display: block;
bottom: 0;}

Himanshu Joshi 6 年前

不需要添加换行符。需要更新.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>