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

问题描述 投票:1回答:3

我希望能够使用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的解决方案对我来说是可以的。

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

javascript html css
3个回答
0
投票

您可以使用固定位置来解决此问题。使用以下代码,最后一页上将显示浮点红色div。请参见以下代码:

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

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>

0
投票

您无需添加换行符。需要更新.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>
© www.soinside.com 2019 - 2024. All rights reserved.