两个 div 中的段落对齐方式,中间有图像

2024-01-11

我怎样才能对齐我的段落,如下图所示

this image.

我需要展示一份报纸之类的东西,其中应该包含此内容。

以下是我正在使用的html代码

<div class="left"></div>
<div class="right"></div>
<div class="myImage"><img src="question.png"/></div>

css代码是这样的

*{
margin:0;
padding:0;
}  

.right,.left{
height:300px;
width:200px;
float:left;
background:red;
margin:5px;
}

.myImage img{
width:100px;
height:100px;
}

.myImage{
clear:both;
position:absolute;
top:100px;
left:150px;
}

在左侧创建图像元素,浮动到文本右侧。将其错位到右侧,图像宽度的一半带有“边距”。然后,在右侧的 div 上,使用空白 div 创建相同的效果,但方向相反。将 div 浮动到文本的左侧,并将其错位到左侧一半宽度。像这样:

<style>
    .right, .left
    {
        width: 200px;
        height: 300px;
        float:left;
    }

    #real-img
    {
        width: 100px;
        height: 100px;
        float: right;
        margin-right: -50px; /* half the width */
        margin-top: 125px; /* vertical align considering page height minus img half height */
    }

    #fake-img
    {
        width:100px;
        height:100px;
        float:left;
        margin-left: -50px;
        margin-top: 125px;
    }
</style>

和 HTML:

<div class="left">
    <img src="imgurl" id="real-img" />
    [CONTENT_TEXT]
</div>
<div class="right">
    <div id="fake-img"></div>
    [CONTENT_TEXT]
</div>

当然,考虑到您对所有尺寸进行了硬编码,所有这些都是如此。

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

两个 div 中的段落对齐方式,中间有图像 的相关文章

  • JavaScript 中带前导零的数字发生变化

    我使用 print 语句从 php 调用 javascript 函数来打印 html 代码 并且传入一个整数 但是 在 php 中传递的值与 javascript 函数接收到的数字不匹配 我不知道为什么 这是调用 javascript 函数
  • 删除圆形图像周围的边框

    我有一个圆形图像 png 文件 中间是透明的 我需要将图像内的背景设置为纯色 为此 我将背景设为纯色 然后将border radius 50 但这会产生一条丑陋的小白线 有没有办法摆脱这个问题 或者我必须在图像编辑器中手动为图像着色 div
  • Internet Explorer 中的锯齿状按钮边缘

    如何去除 Internet Explorer 中宽按钮的锯齿状边缘 例如 您还可以通过设置来消除 Windows XP 的按钮样式 以及 Windows 的所有其他版本 background color and or border colo
  • 我可以从命令行打印 html 文件(带有图像、css)吗?

    我想从脚本中打印带有图像的样式化 html 页面 谁能建议一个开源解决方案 我使用的是 Linux Ubuntu 8 04 但也对其他操作系统的解决方案感兴趣 你可以给html2ps http user it uu se jan html2
  • Java Web 技术中的 AJAX 自动完成文本框(JSP 和 servlet)

    我需要您的帮助 了解如何使用 Java Web 技术 JSP Servlet 和 AJAX 使 HTML 输入文本元素像 Google 的 AJAX 搜索引擎 输入文本元素一样工作 下拉列表中的数据将来自数据库表 例如分别是 MySQL 或
  • HTML:如何强制链接在新选项卡而不是新窗口中打开[重复]

    这个问题在这里已经有答案了 I use target blank 在新选项卡中打开链接 但在 IE 中它会打开一个新窗口 这是完全合乎逻辑的 因为这就是 blank应该做的 我不知道如何target blank 在其他浏览器中的行为 有什么
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • 在iOS上,“添加到主页”缓存保存在哪里,如何清除它?

    我正在 iPad iOS v7 上制作一个 html5 游戏 当我将其添加到主页时 它非常顽固地释放缓存 如果我在 Safari 中查看它 这会按照您所期望的方式工作 如果我刷新一次或两次 页面就会以最新状态缓存 但在主页上却是另一回事 它
  • Django:使用条件 {% extends %} 使 {% block "div" %} 成为条件

    我想分享一个 AJAX 和常规 HTTP 调用之间的模板 唯一的区别是一个模板需要扩展 base html html 而另一个则不需要 我可以用 extends request is ajax yesno app base ajax htm
  • 为什么我的反应路由器链接将我带到页面中间?

    我的网站上有很多链接 但只有一个可以执行此操作 它没有将我带到导航栏的顶部 而是转到内容的中间 知道为什么会这样吗 这是一个页面 其中有一个 map经历一些JSON 这是渲染div页面下方的文本元素 如果重要的话 这是一些可能相关的代码 路
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时
  • 更改API数据输出的布局

    我是 API 集成和 PHP 的新手 我最近将 VIN 解码器集成到我的应用程序中 在输入框中输入车辆的 VIN 选择提交 然后就会显示 API 数据库中有关该车辆的所有信息 数据存储为关联数组 其中包含类别及其相应元素 例如 对于 VIN
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • Service Worker 与 Shared Worker

    Service Worker 和 Shared Worker 有什么区别 我什么时候应该使用 Service Worker 而不是 Shared Worker 反之亦然 Service Worker 具有共享 Worker 之外的附加功能
  • Facebook 点赞按钮消失

    我的网站中的 Facebook Like 按钮出现问题 添加此代码 由 facebook 提供 按钮在创建时正确显示在任何页面中
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi
  • 为什么使用 iPhone 或 iOS 设备在“iframe”中查看“position:fixed”时不起作用?

    我研究过 stackoverflow 似乎position fixed在 iOS 移动设备的 iframe 中 https stackoverflow com questions 15874910 position fixed and if

随机推荐

  • RegEx:如果lookbehind显示小写,则删除换行符

    我正在 Notepad 中执行 CTRL H 查找和替换 我想找到所有换行符后跟小写字符 以便用空格字符替换它们 从而删除文本中不需要的换行符 Find r n A Z 0 9 代替 在此插入空格字符 确保您选择了 相符 and 正则表达式
  • boost是如何实现信号和槽的?

    要继续另一个问题 我们问这个 Boost是如何实现信号 槽机制的 See 信号和槽是如何在底层实现的 https stackoverflow com questions 1406940 how signal and slots are im
  • 什么是快照构建/源版本?

    什么是快照构建 源版本 具体到 JDK 7 快照版本供用户在平台仍在开发时下载和查看 http www oracle com technetwork java javase downloads ea jsp 142245 html http
  • R 以相似字符串开头的不同列组的行总和

    我对 R 还很陌生 这是我第一次敢在这里提问 我正在使用具有李克特量表的数据集 并且我想对不同组的列进行求和 这些列共享其名称中的第一个字符串 下面我构建了一个只有 2 行的数据框来说明我遵循的方法 尽管我希望收到有关如何编写更有效的方法的
  • Ajax 传递空值但控制器在 ASP.NET MVC 中获取 null

    我正在与ASP NET MVC并且发送的值有问题Ajax到我的控制器 假设我有SampleViewModel像这样 public class SampleViewModel private string firstName string E
  • Conda:将本地开发包安装到单个 conda 环境中

    如果我使用 virtualenv 我将激活项目的虚拟环境 然后安装我正在开发模式下开发的包 像下面这样 workon superbad pip install e fnawesome 这允许我的包裹fnawesome可以通过我的中的任何代码
  • C++中多重继承的限制

    C 中多重继承的限制是什么 即一个类可以继承多少个类 它是否依赖于实现 或者对多重继承中可以继承的类的数量是否有限制 它是实现定义的 C 11 给出了推荐的最小值实施数量标准部分 直接和间接基类 16 384 单个类的直接基类 1 024
  • JavaScript。无法在 safari 中打开新标签

    以下 JavaScript 可以在 Firefox Chrome 和 IE 中打开一个新选项卡 但它会在 Safari 中打开一个新窗口 javascript window open url blank opens new window i
  • Maven 插件自动生成 setter/getter?

    是否有一个 Maven 插件可以自动生成具有相应 JavaDocs 的 setter 和 getter 我知道 Eclipse Netbeans 会在您告诉它时执行此操作 然而 源代码最好只包含框架并让 Maven 或其他工具生成重复的内容
  • 如何在 Bash 中对数组进行排序

    我在 Bash 中有一个数组 例如 array a c b f 3 5 我需要对数组进行排序 不仅仅是以排序的方式显示内容 而是获取包含排序后的元素的新数组 新的排序数组可以是全新的 也可以是旧的 您实际上并不需要那么多代码 IFS n s
  • jQuery 注释/取消注释

    我正在寻找一种使用 jQuery 将元素包装到注释中的方法 例如 还有一种删除评论的方法 这可能吗 要使用注释包装元素 或者更具体地说 用具有该元素 HTML 的注释节点替换元素 my element jq my element comme
  • 为什么 Chrome 和 FireFox 控制台打印“未定义”?

    获取这个简单的测试对象并将其粘贴到控制台中 你会看到它说undefined 该对象正在工作 因为它还打印123 但是什么是undefined about Test var Test new function return get testi
  • 如何使用选择参数从 android 中的 contentprovider 查询特定行

    我已经构建了一个基本的内容提供程序 用于存储用于学习目的的 SMS 消息 到目前为止我可以读取 无需选择参数 插入 更新和删除 然而 我一直在尝试弄清楚如何格式化我的提供程序中 WHERE 子句的选择参数 基本上我的应用程序需要搜索特定的时
  • 如何隐藏 SWT 组合以使其不占用空间?

    我需要隐藏一个组合 以及里面的所有孩子 只需设置setVisible false 将保留组合的空间 Composite outer new Composite parent SWT NONE outer setLayout new Grid
  • 如何在mp3上实现seek

    我即将进入一个涉及解码 播放 mp3 流的项目 我有一个Java解码器 JLayer 但据我所知它没有搜索功能 我不使用内置播放器 我需要实现我自己的播放器 另外 流是加密的 所以我需要实时解密 解码 不能拥有整个解密文件 那么如何在 mp
  • 我们可以为“Skype for Business”构建 Skype 机器人吗?

    我见过与 Skype 一起使用的机器人编程示例 是否可以使用 Microsoft 的机器人 认知服务工具 框架开发在 Skype for Business 上运行的企业机器人 Skype for Business 尚不支持机器人框架 htt
  • 使用Python对文件夹中的每个文件执行命令

    我正在尝试创建一个Python脚本来 查看文件夹 input 对于该文件夹中的每个视频 运行 mencoder 命令 将它们转码为可在我的手机上播放的内容 mencoder 完成运行后 删除原始视频 这看起来不太难 但我很喜欢 python
  • 当这个通用约束看起来有循环引用时,为什么它会编译

    我在 csharp 中为 MVCContrib Html 帮助器编写了一个扩展方法 并对通用约束的形式感到惊讶 从表面上看 它似乎通过类型参数循环引用自身 也就是说 该方法可以根据需要进行编译和工作 我很乐意有人解释为什么这样做有效 以及是
  • Windows 10 UWP 中的电话

    目前 我找到了 Windows ApplicationModel Calls API 无法拨打电话或启动可用于从我的应用程序拨打电话的不同选项 我也尝试了这个代码 但仍然无法实现电话呼叫功能 UWP有什么解决方案吗 谢谢 if ApiInf
  • 两个 div 中的段落对齐方式,中间有图像

    我怎样才能对齐我的段落 如下图所示 我需要展示一份报纸之类的东西 其中应该包含此内容 以下是我正在使用的html代码 div class left div div class right div div class myImage img