如何将两个图像放置在一个div的对角

2024-06-19

如你所见,我不是 CSS 专家,我需要一些帮助来了解如何使用两个图像制作这个 div,如下图所示


托马斯是对的,但还有更好的解决方案:

<style type="text/css">

    #content {width: 500px;}

    .align-left { float: left; }
    .align-right { float: right; }

</style>

<div id="content">

    <img class="align-left" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <img class="align-right" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div><!-- end content -->

在这种情况下,类比 ID 更有用。

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

如何将两个图像放置在一个div的对角 的相关文章

  • 为不同部分设置 rmarkdown 选项卡颜色

    我想用 Rmarkdown 创建一个 html html 应包含彩色选项卡 根据来自的答案这个问题 https stackoverflow com questions 55276670 coloring tabs in rmarkdown我
  • 不同浏览器中的HTML输入字段高度不同

    现在的情况 在一个简单的网站上 我有一个具有固定高度的输入控件 其中有一个具有特定字体大小的文本 我希望该文本在输入字段的中间垂直对齐 但即使我使用了重置CSS 链接here https github com necolas normali
  • IE 错误响应 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我的 IE
  • 无法在媒体查询中设置 Shadow dom 中元素的样式

    In my styles app theme html我正在尝试更改菜单图标的大小paper drawer panel在媒体查询中 该元素位于index html 中 由于它位于 Shadow dom 中 我似乎无法访问它 我尝试过 可能不
  • Fabricjs HTML5 Canvas:为什么图像大小调整得如此糟糕?

    当我将 775 x 775 图像添加到 Fabricjs 画布并将其大小调整到大约 90 x 90 时 图像的质量大大降低 但如果我添加相同的图像作为 img 并按比例缩小 它保留了其质量 为什么画布图像的质量变得这么低 我怎样才能使画布图
  • 在php中将png合并到多边形上

    我很困惑 我尝试简单地绘制一个多边形并放在上面 就像一个带有透明度的 png 图层一样 没有任何成功 一次背景是黑色的 一次多边形变得不可见 这是我的 php 代码 header Content type image png The png
  • 范围输入拇指随着时间的推移而偏移

    我查遍了 Stackoverflow 似乎所有带有拇指标签的范围滑块都有这个问题 例如 这个答案 https stackoverflow com a 35419875几乎没有 但仍然有 基本上你可以计算value max得到left范围值标
  • 使用 jQuery 异步加载图像

    我想使用 jQuery 在我的页面上异步加载外部图像我尝试过以下方法 ajax url http somedomain com image jpg timeout 5000 success function error function r
  • Genymotion 无法识别 SD 卡上的图像

    所以我一直在玩 Genymotion 喜欢使用它 但一直无法弄清楚如何将图像导入 Android Gallery 应用程序 因此我可以测试另一个应用程序 当前在 Galaxy Nexus 上运行 Android 4 3 尝试通过 adb 和
  • CSS 底部边框悬停“抖动”

    我有一个导航栏 当您将鼠标悬停在导航按钮上时 我想给它一个橙色的底部边框 唯一的问题是 每当您悬停时 边框都会使内容 导航按钮 抖动 这是不应该的 另外 我的导航栏上已经有一个黑色的底部边框 因此无法更改它 HTML div ul li a
  • 在 Selenium 中自动执行下拉菜单而不选择

    我正在尝试使用 Selenium 从下拉列表中选择一个元素 我已经能够选择下拉列表 但我不知道如何从下拉列表中选择特定元素 因为该网站不使用 select 因此我无法使用内置的 select 类 作为参考 这是下拉列表中元素之一的 HTML
  • 我无法在项目中使用节点波本威士忌

    我尝试对 scss 文件使用 npm 模块 波本威士忌 我收到以下错误 with function var paths Array prototype slice call arguments return concat apply bou
  • 我应该使用 CSS3 媒体查询为视网膜显示设备提供不同的图像尺寸吗?

    之前已经在这里问过许多类似的问题 我相信我的有点独特 我用 JQM Cordova PhoneGap 开发了一个移动应用程序 最初我使用大图像 针对视网膜显示设备 并使用响应式 CSS 根据需要缩小图像 这种方法的问题在于 较旧的设备最终必
  • 有什么解决方案可以删除 Firefox 上的清除按钮 吗?

    我尝试禁用隐藏清除按钮 但没有成功Firefox But on Chrome Edge Safari效果很好 知道为什么吗 有解决办法吗 以下是CSS input type time webkit clear button display
  • 嵌套在另一个内联块元素中的内联块元素具有 offsetTop

    我刚开始学习 HTML 现在我有一些代码 例如 div style height 300px width 500px font size 6 div style display inline block background pink wi
  • 禁用“未找到匹配项”文本并在 select2 上自动完成

    如何在 select2 Tagging 支持的自动完成功能上禁用 未找到匹配项 文本 这就是我现在所拥有的 ProductDescriptions 30 keywords select2 tags tokenSeparators minim
  • 保存 Lisp 状态

    我是 lisp 的初学者 有一个问题 当我直接在 REPL 中编写一些代码 没有任何 lisp 文件 时 如何保存解释器的工作 状态以便下次恢复并继续工作 我用的是ECL 谢谢 抱歉我蹩脚的英语 来自电化学发光手册 http ecls so
  • 在纯 css3 循环中按顺序对元素进行动画处理

    我正在尝试在完整的 css3 动画中按顺序对元素进行动画处理 似乎非常直接的答案是使用动画延迟 但是我想要这个循环 有什么想法如何使动画无限循环吗 我找到了这个fiddle http jsfiddle net cherryflavourpe
  • 如何在 Quill(富文本编辑器)中检测和修剪前导/尾随空格?

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档
  • 带有边框半径的CSS中的完美圆不起作用

    圆往往是椭圆形的 我想要的是完美的圆 border radius 100 不起作用我想知道为什么 http jsfiddle net 8gD2m 1 http jsfiddle net 8gD2m 1 badge display inlin

随机推荐

  • AttributeError:“模块”对象没有属性“TestCase”

    我有名为 test py 的unittest 文件 My code import unittest class Test unittest TestCase def myTest self a 1 self assertEqual a 1
  • 将 std::stack .pop() 方法的结果存储到变量中

    我想做以下事情 std stack
  • MVC4 如何设置 cookie 然后重定向到操作

    您好 我正在尝试获取用户角色并将其设置为我的应用程序中的 cookie 我有以下有效的代码 public ActionResult Index var user User Identity Name set by 3rd party cen
  • 通过链接导航多个对象而不重复

    我正在尝试浏览一堆带有其他对象链接的对象 我想从 id 1 开始并浏览每个对象 有些对象会循环回到之前的对象 所以我想确保每个对象只查看一次 否则我会陷入无限循环 我还希望能够通过链接导航来判断哪些对象无法访问 我认为导航顺序并不重要 这是
  • BDD/TDD:依赖可以是一种行为吗?

    我被告知不要使用实施细节 依赖关系看起来像是一个实现细节 但我也可以将其表述为一种行为 示例 LinkList 依赖于存储引擎来存储其链接 例如 LinkStorageInterface 构造函数需要传递一个已实现的 LinkStorage
  • “ghs.google.com”域的机制是什么?

    如果我想给我的应用程序绑定一个域名GAE Google App Engine 我应该添加一条 CNAME 记录ghs google com 我想了解这个域名是如何运作的 例如 我有这样的 CNAME blog goace com ghs g
  • * foreach 里面的 foreach codeigniter 2?

    在 codeigniter 2 1 中 我尝试按类别显示频道 因此 如果我有一个名为 电影 的类别 我应该会看到电影中的频道列表 我尝试使用嵌套的 foreach 循环来完成此任务 但似乎无法使其工作 我的表结构是这样的 但更复杂 我的型号
  • strings.xml 中的 Android 变量

    我在某处读到如何在 XML 文档中使用变量 他们说这很简单 我想也是如此 我在 Android strings xml 文件中成功地使用了它 我一整天都这样使用它 直到突然 android 停止解析它并停止将它视为变量 我这样使用它
  • 一对一映射不适用于二级缓存

    我已经声明了 Hibernate 3 的以下映射 使用 FluentNHibernate public class ActivityMap ClassMap
  • 用渐变画线

    我在不同的位置画了多条线 例如 canvas drawLine startXLine1 stopXLine1 startYLine1 stopYLine1 paint canvas drawLine startXLine2 stopXLin
  • 为什么 fopen("any_path_name",'r') 不给出 NULL 作为返回值?

    在调试一些代码时 我得到如下内容 include
  • HTML表可选择行Javascript包[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 Is there a Javascript package out there that makes table rows selecta
  • 在横向模式下向 UIScrollView 添加子视图

    我有一个以横向模式启动的视图控制器 其中有一个 UIScrollView 我尝试创建子视图并将它们添加到 UIScrollView 但视图的框架大小都是纵向大小 这是我的代码 void viewDidLoad super viewDidLo
  • Chrome 扩展:插入固定 div 作为 UI

    我想使用 chrome 扩展将 div 插入固定位置 它将覆盖您当前正在查看的页面 我担心的是 我希望它可以在任何页面上工作而不改变它 除了插入我的固定 div 之外 但我不知道我这样做的方式是否可行 目前 该按钮不会显示 并且我在让 di
  • Emoji 字符无法编码为 JSON

    我有一个UITextView我称之为messageField 其中的数据messageField is POST ed 以 JSON 格式发送到服务器 当用户输入表情符号字符时 我无法将数据编码为JSON 我认为 Emoji 使用 Unic
  • 顺序没有属性“validation_data”

    我从下面的链接下载并运行该文件https github com keunwoochoi keras callbacks example https github com keunwoochoi keras callbacks example
  • 确定虚拟内存的页表大小

    考虑一个具有 38 位虚拟字节地址 1KB 页和 512 MB 物理内存的虚拟内存系统 假设有效位 保护位 脏位和使用位总共占 4 位 并且所有虚拟页都在使用中 则本机上每个进程的页表总大小是多少 假设磁盘地址未存储在页表中 好吧 如果问题
  • 在 Python 3.8.0 中使用 pip 安装 numpy 时如何修复“错误:命令错误,退出状态 1”

    将Python升级到3 8 0后 我在使用pip安装与numpy相关的包时遇到问题 包括numpy matplotlib和sklearn 错误信息如下 我应该怎么做才能解决这个问题 C WINDOWS System32 gt pip ins
  • 全面的 html5 音频 API

    对于我的一生 我找不到所有 html5 的完整列表
  • 如何将两个图像放置在一个div的对角

    如你所见 我不是 CSS 专家 我需要一些帮助来了解如何使用两个图像制作这个 div 如下图所示 托马斯是对的 但还有更好的解决方案 div img class align left src alt description of your