飘仙建站论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1505|回复: 6

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

[复制链接] |关注本帖
     

8

主题

15

帖子

1462

积分

注册会员②

Rank: 5Rank: 5

积分
1462
发表于 2017-1-21 23:23:32 | 显示全部楼层 |阅读模式
本次悬赏总金额:30 金币 | 剩余悬赏金额:0 金币 | 去赏金大厅看看
本次悬赏到期时间: 本悬赏贴永不过期。
快来加入[悬赏团队],每次获得楼主奖励时可获得系统额外30金币的系统奖励。

只允许悬赏会员本人发放悬赏金币 | 只允许版主或管理员收回悬赏金币 | 最多悬赏人数:10人
会员 悬赏团队 回帖时间 悬赏状态
天外飘仙 [团队成员] 2017-01-22 08:38 获悬赏15金币 | 额外30金币
newlive [团队成员] 2017-02-03 11:38 获悬赏15金币 | 额外30金币
本问题的悬赏已经结束!

<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

   一二三四五 图

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

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

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

     

4377

主题

1万

帖子

30万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
304049

魅力奖活力之星热心会员

发表于 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 你用百分比控制试试看





1.新手起步教程(含注册会员,注册域名,购买空间和网站备案教程)
2.教程看10遍不如动手做一遍! 多动手试试,在出错中解决问题.这样子效率最高!稳速互联
3.看帖回帖是种美德.您的一个帖子能给楼主很大的发帖动力!
回复

使用道具 举报

10

主题

252

帖子

1万

积分

高级站长

Rank: 7Rank: 7Rank: 7

积分
11123

在线之星泡泡之星

发表于 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的布局思想来实现了

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

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

回复

使用道具 举报

     

8

主题

15

帖子

1462

积分

注册会员②

Rank: 5Rank: 5

积分
1462
 楼主| 发表于 2017-2-6 21:49:17 | 显示全部楼层
谢谢大家,谢谢了。

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

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

回复

使用道具 举报

     

0

主题

3

帖子

265

积分

新手上路②

Rank: 2

积分
265
发表于 2018-1-12 11:16:37 | 显示全部楼层
本帖最后由 viva 于 2018-1-12 11:20 编辑

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

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

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

回复

使用道具 举报

     

0

主题

96

帖子

924

积分

注册会员①

Rank: 4

积分
924
发表于 2019-7-1 11:46:05 | 显示全部楼层
好复杂

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

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

回复

使用道具 举报

     

0

主题

300

帖子

5057

积分

初级站长

Rank: 6Rank: 6

积分
5057
发表于 2019-7-1 12:06:47 | 显示全部楼层
路过。。。。。。。

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

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

回复

使用道具 举报

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

本版积分规则

关闭

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

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

GMT+8, 2019-10-23 21:26 , Processed in 0.218750 second(s), 27 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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