找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 8105|回复: 6

[求助] 有关CSS的难题。DIV的排序问题。

[复制链接]
发表于 2017-1-21 23:23:32 | 显示全部楼层 |阅读模式 来自 广东省揭阳市
本次悬赏总金额:30 金币 | 剩余悬赏金额:0 金币
本次悬赏到期时间: 本悬赏贴永不过期。
快来加入[悬赏团队],每次获得楼主奖励时可获得系统额外20金币的系统奖励。

只允许悬赏会员本人发放悬赏金币 | 只允许悬赏会员本人收回悬赏金币 | 最多悬赏人数:10人
还没有会员获得悬赏奖励,加油,快来争头奖!
本问题的悬赏已经结束!

<DIV style="background-color:transparent; ">

      <DIV style="background-color:transparent;float:left;">
            <img src="1.jpg" />                    '图片已经按自己要求编辑好,所以直接引用
      </DIV>


      <DIV style="font-size:12pt; color:#FF5B10; float:left;">
            12345                              
      </DIV>


      <DIV style="font-size:12pt; color:#FF5B10; float:left;">
            一二三四五                             
      </DIV>


      <DIV style="background-color:transparent;float:left;">
            <img src="2.jpg" />                    '图片已经按自己要求编辑好,所以直接引用
      </DIV>

</DIV>

原来想弄成这样的:

   图 12345

   一二三四五 图

结果变成:

  图
  12345
  一二三四五
  图

不敢设置width跟height,因为网页想在手机端打开。最后我还想在

     图 12345

   一二三四五 图

的上面放一张透明的图片。这样就可以通过透明图片看到下面的图片跟文字了。
但是我现实不了,跪求大神教我。
(特别说下,图片的大小跟文字的大小差不多的。不敢弄表格,因为担心弄了表格,在手机浏览器上看,不会自动换行。)

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

发表于 2017-1-22 08:38:48 | 显示全部楼层 来自 河南省新乡市
<div> div1 div2 <div>
<div> div3 div3 <div>

div1 div2 div3 div4 float:left
这样 试试呢,不漂浮的情况下 一个div占一行;

我又想了一下,你想兼容pc和手机访问,估计得想办法 用js 自动调节 字体和图片大小了,占满一行 肯定是会自动换行的……具体的我也不清楚……我想了又想,如果你图片和字体大小是固定的 肯定无法 按你说的那样 同时兼容和pc;

pc和手机屏幕大小都不一样;
建议去找响应式布局 教程学习一下;
div的 width 你用百分比控制试试看





发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

发表于 2017-2-3 11:38:10 | 显示全部楼层 来自 河南省洛阳市
<DIV style="background-color:transparent; ">

        <!--效果:图 12345,百分比宽度根据你各部分所占的宽度来调整-->
        <div class="top" style="width: 100%; overflow: hidden;">
            <DIV style="background-color:transparent;float:left; display: inline-block;width: 40%;">
                <img width="100%" src="1.jpg" />                    '图片已经按自己要求编辑好,所以直接引用
            </DIV>
            <DIV style="font-size:12pt; color:#FF5B10; float:left; display: inline-block; width: 60%;">
                12345
            </DIV>
        </div>

        <!--效果:一二三四五 图,百分比宽度根据你各部分所占的宽度来调整-->
        <div class="bottom" style="width: 100%; overflow: hidden;">
            <DIV style="font-size:12pt; color:#FF5B10; float:left; display: inline-block; width: 60%;">
                一二三四五
            </DIV>
            <DIV style="background-color:transparent;float:left; display: inline-block; width: 40%;">
                <img width="100%" src="2.jpg" />                    '图片已经按自己要求编辑好,所以直接引用
            </DIV>
        </div>
    </DIV>

ps: 你这种布局思路只能实现很初步的缩放,能够简单解决移动端的兼容,现在移动端都是采用css3的布局思想来实现了

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

 楼主| 发表于 2017-2-6 21:49:17 | 显示全部楼层 来自 广东省揭阳市
谢谢大家,谢谢了。

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

发表于 2018-1-12 11:16:37 | 显示全部楼层 来自 四川省成都市
本帖最后由 viva 于 2018-1-12 11:20 编辑

position 加个z-index.就可以让图片覆盖了

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

发表于 2019-7-1 11:46:05 | 显示全部楼层 来自 浙江省金华市
好复杂

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

发表于 2019-7-1 12:06:47 | 显示全部楼层 来自 浙江省金华市
路过。。。。。。。

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-3-29 14:36 , Processed in 0.056423 second(s), 12 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表