交替 div 使图像向左(偶数)或向右(奇数)

2024-06-19

我正在尝试更好地排列图像,而不仅仅是一列中的图像。 请参阅附件中的示例,每篇文章的图像可以位于左侧和右侧。

这是我的代码。 HTML:

<section class="content list_page">
    <article id="post-66">
        <div class="list_img"><img src="img1.png"></div>
        <div class="list_text">Content 1</div>
    </article>
    <article id="post-63">
        <div class="list_img"><img src="img2.png"></div>
        <div class="list_text">Content 2</div>
    </article>
    .
    .
    .
</section >

CSS:

.list_page:nth-child(odd) .list_img{ 
    float:right; 
}
.list_page:nth-child(even) .list_img{
     float:left;
}

我怎么做?请帮忙。 -提前致谢


尝试使用这个CSS

.list_page article:nth-child(odd) .list_img{ 
    float:right; 
}
.list_page article:nth-child(even) .list_img{
     float:left;
}

问题是您选择父 div 而不是子文章

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

交替 div 使图像向左(偶数)或向右(奇数) 的相关文章

  • 我无法在项目中使用节点波本威士忌

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

    之前已经在这里问过许多类似的问题 我相信我的有点独特 我用 JQM Cordova PhoneGap 开发了一个移动应用程序 最初我使用大图像 针对视网膜显示设备 并使用响应式 CSS 根据需要缩小图像 这种方法的问题在于 较旧的设备最终必
  • 单击 div 时更改复选框状态(真/假)

    我有一个带有图像 标签和输入复选框的 div 当我点击 div 时 我喜欢什么 它会将复选框状态从 true 更改为 false 并且反之亦然 jQuery markerDiv click function if this find inp
  • 尝试将星号添加到必填输入字段

    我想我不太明白 before and after因为我无法让这个工作 我只是想在表单中的必填字段后添加一个星号 我的代码很简单
  • Jquery - Fancybox - 后台页面移位问题

    Fancybox 加载良好 所有内容都按照我想要的方式打开 但问题发生在后台 可以看到 并且令人不安 当盒子加载并返回到盒子上的正常位置时 我的整个页面向右移动了 8 个像素关闭 我无法链接到该网站 因为它位于我们公司防火墙后面的开发服务器
  • Safari 中的按钮是否损坏?

    我有一些带有单行文本的按钮 我们称它们为short 我还有其他带有多行文本的按钮 我们称它们为long 在 Chrome 中 所有按钮看起来都很好并且相同 但在 Safari 中 long看起来不同于short long看起来像是被压住了
  • 从多个“输入:文件”中删除 FileList 项

    我有这个 DOM var id 0 input file upload 0 files id 这是第 0 个索引上的第一个文件 列出了文件属性并且一切正常 但是 我们如何从 DOM 中删除项目 object FileList 使用 Java
  • 根据id统计div元素

    我有一个类似的页面 div div div div div div div div div div div div 我想知道 id 与表达式 box content X text 其中 X 是数字 匹配的 div 的数量 我可以使用纯 ja
  • 为什么我的 HTML 文件无法在浏览器中显示?

    我正在学习如何使用文本编辑器 并且刚刚用它创建了我的第一个文件 它预览了正确的输出 但是当我在浏览器中运行它时 它给了我一个空白页面 正如您所看到的 doctype 和 html 标签以及 head 和 body 都已就位 我使用 Visu
  • 错误:使用本地文件时,summernote 不是一个函数

    我遇到了一个非常奇怪的问题 当我使用本地的 Summernote 文件加载文本编辑器时 发生了 summernote 不是函数 的情况 但是 如果我使用 cdn 文件加载编辑器 一切都会顺利 这是我的 HTML 标头代码
  • 制作一个透明的圆形按钮,带有不透明边框和文本/字体很棒的图标

    基本上我想要一个性感的 反应灵敏的圆形按钮 它是透明的 这样你就可以通过它看到背景 但有一个不透明的轮廓 这样你就可以看到按钮和不透明的文本 或者也许我会在稍后阶段添加一个字体很棒的图标 这是我的 JS 小提琴 这样你就可以看到我正在尝试做
  • Chrome扩展程序自定义光标

    我构建了一个 Google Chrome 扩展程序 在网站中放置一些 IMG 标签 hover 上的此 img 标记必须显示自定义光标 该扩展使用 jQuery 作为其注入的核心脚本 我尝试了以下方法 1 var cursor url ch
  • 客户端与服务器端图像压缩[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在研究用户可以上传图片的东西 图像大小不受限制 现在我有两个选择使用PHP 服务器端 压缩图像或使用
  • NicEdit 数据不在 POST 中

    我确信我在这里错过了一些非常简单的东西 我已经搜索过 但似乎找不到答案 用这个简单的形式 我如何将 NicEdit 框中的内容发送到我的 HTTP POST 我得到的只是原始文本区域值而不是编辑后的版本 h2 Test Page h2
  • 位置固定,无顶部和底部

    我发现了有趣的功能 但找不到它发生的原因 所以 我们有固定位置元素 它位于 body 下方 第一个元素有样式 firstEl width 100 height 200px background color green 第二个元素有 fixe
  • 带有边框半径的CSS中的完美圆不起作用

    圆往往是椭圆形的 我想要的是完美的圆 border radius 100 不起作用我想知道为什么 http jsfiddle net 8gD2m 1 http jsfiddle net 8gD2m 1 badge display inlin
  • jquery - 如何根据我的滚动位置滚动顶部动画到下一个可见的 div/类?

    如果标题有点模糊 请原谅我 因为我不知道如何写下来 基本上 我们有一个包含 6 个 场景 的页面 他们都有班级 scene和不同的 ID 例如 scene1 scene2 etc 首先 我们必须动态更改每个场景的颜色 gt 场景 1 是浅色
  • HTML/CSS 水平导航子菜单悬停显示错误

    我正在创建一个带有水平导航和垂直子菜单的 HTML 页面 一切工作正常 除了子菜单上的悬停显示在实际菜单项的左侧 看我的jsfiddle https jsfiddle net qmcte349 https jsfiddle net qmct
  • 如何使用Javascript统计通过ajax返回的
  • 的数量?
  • 我有一个 ajax 代码 它将列表项返回为 li one li li Two li 每次都会返回不同数量的 li 的 我想查一下数量 li li 它返回 如何使用 JavaScript 检查它 给你 returnedHTML find li
  • HTML5 中填充笔划的透明度

    我正在 HTML5 中开发一个涂鸦应用程序 我想做一种桶功能 这个想法是绘制一条路径 它将被关闭并用选定的颜色 描边的颜色 填充 它对于纯色效果很好 但如果我想要透明的描边和填充 我会遇到这个问题 所发生的情况是填充完成到笔划的中间 路径的

随机推荐