图像和其他 div 彼此相邻的 Div 容器 [关闭]

2023-12-12

我正在尝试绘制一个容器,其中包含左侧的图像(缩略图)和图像旁边的几个 div(垂直:在容器的中间)。除了纯文本之外,它们还包含按钮和下拉列表,可能还包含其他内容。

我知道我需要使用float:left等等,但我不走运——看起来不太好。所以我什至不会提供我所取得的成就的例子。相反,我将提供我的愿景:

vision of the problem

I don't想要一个表格解决方案,只需要 div — 当然,如果可能的话。

有人可以帮我们解决这个问题吗?


Use display: inline-block;。它基本上是内联和块行为的混合。这是一个 HTML 示例:

<div class = "container">
    <img src = "pic.png" class = "inbl"/>
    <div class = "inbl"></div>
    <div class = "inbl"></div>
</div>

CSS:

.inbl {
    display: inline-block;
    vertical-align: top;
}
.container {
    white-space: nowrap;
}

还有一个小演示:小链接.

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

图像和其他 div 彼此相邻的 Div 容器 [关闭] 的相关文章

  • HTTPS 网站上的 ShareThis 按钮不可点击

    我已将 共享此 按钮添加到我的安全站点 现在单击它们时会产生错误 下面提到了错误 以前有人遇到过这个问题吗 阻止加载混合活动内容 http w sharethis com button buttons js http w sharethis
  • 如何使用 AngularJS 输出 JSON 数组中的元素

    JSON 数组定义在作用域中 scope faq Question 1 Answer1 Question 2 Answer2 HTML div f div Output Question 1 Answer1 Question 2 Answe
  • 从 html 页面打印表格

    我有一个 html 页面 需要将表格发送到打印机 我现在正在使用 window print 但这会打印整个页面 而我只需要打印表格 有任何想法吗 您可以使用媒体类型 打印 http www w3 org TR CSS21 media htm
  • 如何使用 jQuery mobile 确保动态 DOM 元素具有正确的 css

    我正在使用 jQuery mobile 构建一个移动应用程序 我尝试动态添加一些输入 但是 jQuery 移动样式未添加到动态创建的输入中 我创建了一个简单的应用程序 http jsfiddle net jGhqS http jsfiddl
  • 当放置在 css 中时,为什么 Firefox 无法读取带有空格的图像路径?

    例如 CSS 中类似这样的规则 div something background image url http i2 photobucket com albums y24 5609903697 Beyond Birthday BB39 jp
  • 如何在对角线元素上创建 CSS 边框

    这是一个例子 http jsfiddle net 52c7t http jsfiddle net 52c7t Simply 我试图让 div 位于右侧 并具有像左侧 div 一样的边框 我希望边框位于右侧 div 的左侧 我尝试了一百万种不
  • 为什么我们不应该将块元素放置在内联元素中[重复]

    这个问题在这里已经有答案了 如果我将 div 元素放置在锚元素内 它会使我的 HTML 无效 不将块级元素放置在内联元素内的原因是什么 如果我将 div 元素放置在锚元素内 它会使我的 HTML 无效 从 HTML5 开始 情况并非如此 h
  • 如何检测谷歌地图是否加载成功

    我在我的网站中使用谷歌地图版本 3 我遇到了地图有时无法加载的问题 而是显示为灰色框 并且浏览器日志将充满错误 不幸的是 我现在无法获取日志 因为地图再次工作 根据一些研究 问题是因为我使用的实验版本 有没有办法查明地图是否已成功加载或崩溃
  • 占位符 Internet Explorer 11 未显示

    我在 IE 11 中遇到占位符问题 尽管兼容性表中说 IE 11 可以显示占位符 我不是在谈论专注于输入 当我不关注输入框时也没有占位符 IE版本 11 0 9600 我没有在占位符上应用 CSS 在其他浏览器中显示占位符 我还尝试了使用元
  • 将 HTML5 转换为独立的 Android 应用

    我有一个动态HTML5不包含任何外部资源的文档 文档内没有编码图像 CSS 和脚本 这个 HTML5 应用程序在互联网浏览器上运行良好 我想知道是否有可能convert this HTML5 应用程序转换成独立的 Android 应用程序
  • 使用 CSS 和 JQuery 创建组织结构图结构

    I was checking on stack forum Trees in Twitter Bootstrap https stackoverflow com questions 11167628 trees in twitter boo
  • 错误 102 (net::ERR_CONNECTION_REFUSED):服务器拒绝连接 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我开发了 Facebook 应用程序 它克隆了我网站的注册和登录部分 用户可以通过 Facebook 注册或登录我的网站
  • 自定义 CSS 不适用于 Bootstrap

    首先我想说 我知道我的 HTML 并不是最高效或最干净的 我的问题是我编写的自定义 CSS 根本不适用于我的网页 Bootstrap 似乎工作得很好 但是当我尝试进行任何编辑或覆盖 Bootstrap 时 它完全不起作用 我知道我的自定义
  • 无法使用“无”覆盖背景颜色,只能使用“继承”

    我试图从 Windows 8 ListView 控件中的 win container 元素 图块 中删除白色背景 以使背景显示出来 当我追踪样式时 我可以看到白色背景是按照以下规则应用的 win listview not win footp
  • 四列布局,无需媒体查询即可转换为单列

    我正在尝试创建一个四列布局 其中每列随着窗口的大小而增大和缩小 但每列都有最小宽度 当窗口太小而无法将所有四列放入单行时 它会转换到单个列 每个部分占据整个宽度 我无法使用 flex box 或 CSS 网格来做到这一点 我想在没有媒体查询
  • 如何切换整个页面的深色主题?

    我已经成功地在 html 和 Flask 中按下复选框时切换深色主题和浅色主题 但是我怎样才能让深色主题覆盖整个页面 而不仅仅是一些 div 元素呢 边距仍然是浅色主题 CSS代码如下 container display flow widt
  • 删除 CSS Transitionend 事件侦听器不起作用

    我在尝试删除 css Transitionend 事件侦听器时遇到问题 我可以添加监听器 e addEventListener transitionend function event transitionComplete event pr
  • Twitter bootstrap 3 RC2 - IE8 中的导航不起作用

    我正在使用 Twitter Bootstrap 3 RC2 在页面顶部创建一个导航栏 除了在 IE8 中之外 该导航栏工作正常 在 IE8 中 就像浏览器变小一样 因此菜单会折叠以供移动视图使用 但这种情况并非如此 现在我知道 TB3 仍在
  • Webp 和

    我面临一个问题 我似乎无法找出问题是什么 我有
  • 打印html时在页面上打印页码

    我读过很多关于打印页码的网站 但当我尝试打印它时 我仍然无法让它显示在我的 html 页面上 所以 CSS 代码如下 page margin 10 top center font family sans serif font weight

随机推荐

  • @aspnet_Membership_CreateUser 的密码

    应用 书呆子晚餐 该 SP 用于为新创建的用户插入密码 我试图找出应用程序代码中 Password 的来源 因为它是提供给该 SP 的 我在应用程序级别上查找它 但在应用程序级别上找不到它 有谁知道应用程序中哪里使用SP来传递 Passwo
  • WaitForSingleObject 不等待进程结束[重复]

    这个问题在这里已经有答案了 我想等待进程执行 calc exe 结束 但它不起作用 我的程序很快完成 而我的进程 calc exe 继续运行 我没有停止它 并且 WaitForSingleObject 立即返回 WAIT OBJECT 0
  • 比较Excel中的两列,插入空白行移动关联数据

    我在Excel中有大量数据需要按列进行匹配 具体来说 目前的数据如下 Column 1 Column 2 Column 3 1 1 aaaa 2 3 bbbb 3 4 cccc 4 理想情况下 我希望数据看起来像 Column 1 Colu
  • 如何在 Xamarin.Forms 中登录 Facebook

    我想制作一个 Xamarin Forms 项目 针对 iOS Android 和 Windows Phone 我的应用程序需要使用 Facebook 对用户进行身份验证 我应该独立实现每个平台的登录 还是使用手动流程 https devel
  • 在文本文件中打印 strace 命令的输出

    我需要将以下命令的结果写入文本文件 但该命令不起作用并且在使用时cat output txt什么也不给我看 请帮我解决这个问题吗 strace r y e read Program l o output txt thanks 为了将来的参考
  • 如何使用 C# 在 .Net 中的类型化对象列表中选择对象属性的所有值

    呃 我该如何解释这个 可能是一个简单的问题 但我的头脑很混乱 假设我有这样的课程 public class NestedObject public string NestedName get set public int NestedInt
  • 如何通过 C++ 检索已提交的内存

    我在这里找到了这个问题的几个答案 但没有一个能回答我的问题 我正在尝试追踪非托管 C 应用程序中的一些内存泄漏 通过阅读以下内容 内存 提交大小 似乎是监视内存使用情况时使用的最佳指标 http forum sysinternals com
  • 闭包语法

    function makeIncreaseByFunction increaseByAmount return function numberToIncrease return numberToIncrease increaseByAmou
  • 如何将响应数据中的特定数据保存到 csv 文件

    在我的 Web 服务测试计划中 我发送 SOAP 请求来创建用户 并在响应数据中发回用户名和唯一 ID 我想将该用户名和 uniqueid 保存到 CSV 文件中 谁能让我知道我怎样才能实现这一目标 您可以使用 Regex 后处理器提取数据
  • ClosedXML Excel 按多列中的值过滤行

    我有一个 Excel 文件 其中包含数千行和最多 BP 的列 我需要按 C 列和 BP 列中的特定值过滤所有这些行 我按照下面的代码测试了 ClosedXML 中的过滤器功能 当我将过滤器应用于一列时 一切正常 并且数据保存在新文件中 当我
  • 在同一测试中重用 pytest 夹具

    下面是使用的测试代码示例user用于设置测试的夹具 pytest fixture def user Setup db connection yield User email protected Close db connection def
  • 在子类的回调方法中调用父类的方法

    我有两个类 B 类扩展了 A 类 在 B 类中 我正在执行一些画布操作 因此需要调用回调来加载图像 在回调中我想调用父类的相同方法 但是 如果我将这行代码放入回调中 则会出现语法错误 Uncaught SyntaxError super 关
  • Scala 未来应用程序在完成之前终止

    只是试图让我的第一个 future 使用并运行 并进行类似于 Akka in Action MEAP 书中概述的示例的测试 我想调用一个网络服务并在将来返回结果 我正在使用 scalaxb 访问 Web 服务 我已经概述了下面的代码 但是当
  • 使用 Twilio SMS API,我可以在一篇文章中指定多个目标电话吗?

    Twilio 将长代码 SMS 限制为 1 次 秒 为了提高吞吐量 我将批次分成 5 个电话号码 我发现 Twilio API 的每个 HTTP POST 大约需要 0 5 秒 人们可能会认为使用 5 个 twilio 电话号码向 1000
  • 用于嵌套 Div 标签的 PHP 正则表达式

    我需要一个可以与 PHP 的 preg match all 一起使用的正则表达式来匹配 div 标签内的内容 div 看起来像这样 div Content div 到目前为止 我已经想出了这个正则表达式 它匹配所有 id t number
  • 如何计算firebase实时数据库中的键数

    如何在 firebase 函数的帮助下计算键的数量 在上面的情况下有 3 个 我正在使用 firebase 实时数据库 Firebase 实时数据库没有单独的计数操作 您必须下载父节点的整个快照 geoTag 然后计算应用程序代码中的子级数
  • C# - Json POST 请求已发送,但 PHP 服务器未收到

    我正在从 C Windows 表单应用程序向 OpenShift Red Hat 上托管的 PHP 服务器发送 HTTP 请求 我正在使用 POST 方法和 Json 数据 问题是 数据似乎已正确发送 我在wireshark中看到数据包 p
  • 如何将jax-ws服务部署到eclipse或tomcat?

    作为一名 Web 服务初学者 我已经尝试了 2 周来获得一个与 Maven Eclipse 和 Tomcat 一起使用的 hello World Web 服务 我放弃了让任何代码 wsdl 生成器工作的尝试 我遵循了本教程http myar
  • 猫鼬鉴别器在数据库中有何帮助? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 你好 我正在学习 mongodb 我了解了 mongoose 中的鉴别器 我试图从文档方面理解它 但不太理解 任何人都可以用更好的方式解释吗 谢谢 举个例子 您的项目有两个角色
  • 图像和其他 div 彼此相邻的 Div 容器 [关闭]

    很难说出这里问的是什么 这个问题模棱两可 含糊不清 不完整 过于宽泛或言辞激烈 无法以目前的形式合理回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我正在尝试绘制一个容器 其中包含左侧的图像 缩略图 和图像旁边的几个 div 垂直 在容