文本环绕绝对定位的 div

2024-03-24

我知道有一些关于类似主题的问题,但它们主要涉及浮动 div/图像。我需要将图像(和 div)绝对定位(向右),但我只想让文本围绕它流动。如果我浮动 div 但我无法将其放置在我想要的位置,它会起作用。因为文本只是在图片后面流动。

<div class="post">
    <div class="picture">
        <a href="/user/1" title="View user profile.">
            <img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s picture" title="neatktp&#039;s picture"  />
        </a>
    </div>
    <span class='print-link'></span> 
    <p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
    <p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>

是 HTML 的示例

CSS 为:

.picture img {
    background: #fff;
    border: 1px #ddd solid;
    padding: 2px;
    float: right;
}
    
.post .picture {
    display: block;
    height: auto;
    position: absolute;
    right: -10px;
    top: -10px;
    width: auto;
}

.post {
    border: 1px solid #FFF;
    border-bottom: 1px solid #e8ebec;
    padding: 37px 22px 11px;
    position: relative;
    z-index: 4;
}

这是一个 Drupal 主题,所以这些代码都不是我的,只是在放置图片时它不能完全工作。


我知道这是一个较老的问题,但我遇到它是为了做我相信你正在尝试做的事情。我已经使用 :before CSS 选择器制定了一个解决方案,所以它对于 ie6-7 来说不是很好,但在其他地方你应该很好。

基本上,将我的图像放在 div 中,然后我可以事先添加一个长的浮动块来将其向下碰撞,并且文本会愉快地环绕在它周围!

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}

您可以在这里查看:

http://codepen.io/atomworks/pen/algcz http://codepen.io/atomworks/pen/algcz

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

文本环绕绝对定位的 div 的相关文章

  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • 获取点击元素的 HTML 内容 jQuery

    我有以下 HTML
  • 设置overflow-y可见,而overflow-x为auto,以便内容可以垂直溢出父容器

    我在用着position absolute and position relative如果将其父级悬停在图像上 则在图像上显示文本 文本和图像父 div 所在的容器设置为overflow x auto 使其具有水平滚动条 我想要看起来垂直溢
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • Thymeleaf 下拉菜单中的默认值

    我正在使用 Spring MVC 和 thymeleaf 构建一个 Web 应用程序 我的下拉菜单是这样的并且它按预期工作
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 为什么字体扩展仅适用于 PDF,而不适用于其他格式(HTML、XLS、DOC)?

    通过 Jaspersoft Studio 我们使用以下设置将用于 Web 应用程序的内置 Windows Calibri 字体变体导出到字体扩展 JAR 中 导出的jrfontextensions jar内的目录结构如下 jrfontext
  • 将 Div 放置在另一个 DIV 下方

    我有两个 DIV 元素 其中之一具有绝对位置 主 DIV 的左下角 第二个 DIV 是隐藏的 只有单击链接才能显示 我需要第二个出现在第一个下方 但由于第一个 div 的位置是绝对的 第二个 div 出现在第一个 div 之上 HTML 代
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a

随机推荐

  • 如何使用marklogic数据库进行数据实时处理

    我正在尝试评估数据实时处理的标记逻辑 早些时候 我使用 kafka 和 Storm 来实时处理数据 并在处理后插入到数据库中 我是 marklogic 的新手 所以有人可以告诉我 marklogic 中是否有任何可用的东西 我可以使用它来实
  • 将提交推送到已打开拉取请求的另一个用户的分支

    我在 github 上有一个存储库 我的存储库是由另一个用户分叉的 现在他提出了拉取请求 我想将一个提交从我的一端推送到他的功能分支 他已为此提出了 PR 这可能吗 这是我所做的 git pull remote ref other user
  • Powershell 重命名和压缩

    需要使用powershell重命名同一目录中的所有文件 源文件 1234 56789abc t1 20201 0 4 0 pdf 1234 56788def t2 20200 0 4 1 pdf 重命名的文件 1000 56789abc t
  • “while (true)”通常用于永久线程吗?

    我对编码还比较陌生 我的大部分 工作 只是简单的 GUI 应用程序 只能完成一件事 所以我不需要太多线程 不管怎样 关于线程 我想知道的一件事是 如果你想让线程永远保持活动状态以完成它正在执行的任何工作 处理 等待输入等 那么将其格式化是否
  • 交换字符串中的字符

    我是 python 新手 我想知道如何交换字符串中的两个字符 我知道字符串是不可变的 所以我需要找到一种方法来创建一个交换字符的新字符串 具体来说 一般方法采用字符串和两个索引 i j 并将 i 上的字符与 j 交换 正如您正确指出的那样
  • 运行 Fish shell 时,“pandas”导入 (Mac OS X) 时出现“未知区域设置:UTF-8”错误 [重复]

    这个问题在这里已经有答案了 我最近升级到 Python 3 5 和最新版本的 pandaspandas 0 17 1 但这对我来说打破了包裹 我使用的是 Mac OS X 10 9 5 使用 Fish shell 我能做些什么 cls cl
  • 如何用c++编写可移植的浮点运算?

    假设您正在编写一个执行大量浮点运算的 C 应用程序 假设此应用程序需要在合理范围的硬件和操作系统平台上进行移植 例如 32 和 64 位硬件 32 和 64 位版本的 Windows 和 Linux 您如何确保您的浮点运算在所有平台上都相同
  • 如何在c#中打印方法的地址?

    在 C 语言编程中 void foo void main printf p foo 将打印 foo 函数的地址 请告诉我 C 中是否有方法可以实现相同的目的 C 是一种高级语言 方法不需要有 地址 这是留给运行时的实现细节 但是 如果您需要
  • 从不同文件创建 javascript 对象

    我已经尝试做 javascript 一段时间了 但我希望它是 面向对象的 所以我尝试在不同的文件中创建不同的 javascript 类 并尝试创建一个对象并在不同的文件中调用它的方法功能 但似乎不起作用 这是我到目前为止所拥有的 perso
  • 将列表转换为地图

    我得到了一个要转换为地图的字符串列表 我尝试了下面的方法 但我似乎不明白为什么它不起作用 List
  • 特定组件的自定义样式应用于 Angular 6 中的所有组件

    ui 网格 我试图将自定义样式应用于特定组件 我想更改该特定组件的字体大小 但是当我在该特定组件 css 文件中编写 css 代码时 并且在加载该组件后 该样式将应用到所有其他组件也 以下是css文件中的代码 k grid td font
  • 为什么新的 Mac 不显示我的屏幕保护程序?

    我们写了一个应用程序 屏保忍者 https screensaver ninja 通过将屏幕保护程序复制到 Library Screen Savers 来为用户安装屏幕保护程序 这在我的机器和其他开发人员的机器上运行良好 但在我拥有的测试机器
  • 如何在 SQL Server 中确定日期时间范围是否与另一个日期时间范围重叠

    我们有例如 下表 ID startDateTime endDateTime 1 2010 01 01 10 30 00 2010 01 01 11 00 00 2 2010 01 01 10 30 00 2010 01 01 11 30 0
  • C++ 计时,自上一整秒以来的毫秒数

    我正在开发一个需要详细计时信息 低至毫秒级别 的 C 应用程序 我们打算使用标准来收集时间到秒的精度time 函数于
  • 无效的捆绑包结构 - 该应用程序可能仅包含一个可执行文件。

    这个问题 https stackoverflow com questions 16424431 invalid bundle structure ios即使不相同 也是相似的 但没有解决方案 我查看了存档内部 发现只有一个可执行文件 所以我
  • javascript 如何上传 blob?

    我有一个这样结构的 blob 数据 Blob type audio wav size 655404 slice function size 655404 type audio wav proto Blob 它实际上是使用最新的 Chrome
  • 是否可以将对象移出函数? (C++11)

    该程序尝试将一个字符串移出函数并将其用于构造另一个字符串 include
  • 使用 Google App Engine php55 或 php7 将任意大文件下载到云存储的解决方案是什么?

    我有一个谷歌应用程序引擎 php55 服务 它定期检查公共网站并下载文件 该文件通常很小 我发现这个文件有时会更大 超过32M
  • ECMAScript v 6 何时成为标准 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 很抱歉 如
  • 文本环绕绝对定位的 div

    我知道有一些关于类似主题的问题 但它们主要涉及浮动 div 图像 我需要将图像 和 div 绝对定位 向右 但我只想让文本围绕它流动 如果我浮动 div 但我无法将其放置在我想要的位置 它会起作用 因为文本只是在图片后面流动 div cla