当前位置：首页 → 问答吧 → 请问一下，这种情况大家会怎么做，在线等！！！！！！！

请问一下，这种情况大家会怎么做，在线等！！！！！！！

时间：2011-03-31

来源：互联网

原本很简单的一个东西，但是中间加了一张图片，就不知道该怎么做了- -！！

我自己的想法是用1个大的DIV包起来做3个小Span
就是这样：
C# code


    <div>
    <span class="cententOne">   
    </span>
    <span class="cententTwo">
    </span>
    <span class="cententOneTwo">
    </span>
    </div>

CSS code


.cententOne
{
    background-image:url(../imgs/blue_borber.jpg);
    width:595px;
    height:7px;
    background-repeat:repeat-x; 
    margin-left:120px;
    margin-top:50px;
    }
.cententTwo
{
    background-image:url(../imgs/small_ima.jpg);
    background-repeat:no-repeat;
    width:92px;
    height:61px;
}
.cententOneTwo
{
    background-image:url(../imgs/blue_borber.jpg);
    width:53px;
    height:7px;
    background-repeat:repeat-x;    
    }

但是页面就不显示出来！！！！

作者: nuonuo33 发布时间: 2011-03-31

HTML code

<style type="text/css">
.cententOne
{
    background-image:url(../imgs/blue_borber.jpg);
    width:595px;
    height:7px;
    background-repeat:repeat-x; 
    margin-left:120px;
    margin-top:50px;
    float:left;
    }
.cententTwo
{
    background-image:url(../imgs/small_ima.jpg);
    background-repeat:no-repeat;
    width:92px;
    height:61px;
    float:left;
}
.cententOneTwo
{
    background-image:url(../imgs/blue_borber.jpg);
    width:53px;
    height:7px;
    background-repeat:repeat-x;
    float:left;
}
</style>
<div>
    <div class="cententOne"></div>
    <div class="cententTwo"></div>
    <div class="cententOneTwo"></div>
    <div style="clear:both;"></div>
</div>

作者: T5500 发布时间: 2011-03-31

可是 IE 就是这样效果了

火狐就是这样了

我的代码是这样的
CSS code


.cententOne
{
    background-image:url(../imgs/blue_borber.jpg);
    width:595px;
    height:7px;
    background-repeat:repeat-x; 
    margin-left:60px;
    margin-top:50px;
    float:left;

    }
.cententTwo
{
    background-image:url(../imgs/small_ima.jpg);
    background-repeat:no-repeat;
    width:92px;
    height:61px;
    float:left;
    margin-top:20px;
}
.cententOneTwo
{
    background-image:url(../imgs/blue_borber.jpg);
    width:53px;
    height:7px;
    background-repeat:repeat-x;    
    float:left;
    margin-top:50px;
    }
.bottomOne
{
    background-color:#f8f8f0;
    width:740px;
    height:180px;
    margin-left:120px;
    margin-top:50px;
    border: #ebc282 1px bolid;
    }

能再帮帮我吗？

作者: nuonuo33 发布时间: 2011-03-31

恩。。IE浮动有BUG，加入display:inline;就可以解决。倒是那个.bottomOne的样式是应用在哪里的，你想要实现的效果是？

作者: T5500 发布时间: 2011-03-31

引用 3 楼 t5500 的回复:
恩。。IE浮动有BUG，加入display:inline;就可以解决。倒是那个.bottomOne的样式是应用在哪里的，你想要实现的效果是？

是这样的我的bottomeOne 是想设置下面那个那个灰色属性框的样式

因为我是希望得到这种

这种样式

作者: nuonuo33 发布时间: 2011-03-31

加上下面一条样式试试：
CSS code

.cententOne, .cententTwo, .cententOneTwo { display:inline; }

作者: T5500 发布时间: 2011-03-31

火狐依然只这样

IE 很正常

作者: nuonuo33 发布时间: 2011-03-31

不懂了，等待高手现身吧。

作者: T5500 发布时间: 2011-03-31

引用 7 楼 t5500 的回复:
不懂了，等待高手现身吧。

还是非常感谢你

作者: nuonuo33 发布时间: 2011-03-31

不能简单点来想吗？

一条线是背景图片，repeat-x

而那幅图并不是背景，只是一个右float的层里的一张图而已。

作者: mf4do 发布时间: 2011-03-31

最外面的<div style="position:absolute;top:1px">

作者: jywcyx 发布时间: 2011-03-31

请问一下，这种情况大家会怎么做，在线等！！！！！！！

热门阅读

热门下载