有关CSS的难题。DIV的排序问题。

digfang

<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

   一二三四五 图

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

天外飘仙

<div> div1 div2 <div>
<div> div3 div3 <div>

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

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

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

newlive

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

digfang

谢谢大家，谢谢了。

viva

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

px2019

好复杂

kkee99

路过。。。。。。。