css问题

[takako_mu]

3个div，外面一个大div，里面包了两个小div，这两个div是左右放的，左边这个div的宽度不确定，由里面的图片确定，右边的div则紧跟着左边的div。求解？

    <div id="header" class="header" runat="server">
        <div id="logo" runat="server" class="logo">
        </div>
        
        <div class="title">
            <asp:Label ID="lblMsg" runat="server" Font-Bold="true" ForeColor="Red"></asp:Label>
            <pu:Language ID="lng" runat="server" />
        </div>
    </div>

.header { width: 100%; height: 70px; background-image: url(Images/header-bg.gif); }
.header .logo {width:100%; height: 70px; float:left; background: url(Images/logo.gif) no-repeat; }
.header .title { margin-left: 220px; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right; }

我写的这个在IE8下面还行，在IE6下就不行了，两个小div会成上下关系。

[变成熊猫你就老实了是不]

可以用jquery控制，可以不考虑浏览器差异

[shirlydyh]

.header .logo {width:100%; height: 70px; clear:left; background: url(Images/logo.gif) no-repeat; }
.header .title { margin-left: 220px; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right; float:right;}

你改成这样试试

[jiangmurong]

之前也有跟LZ同样的问题~~~

[jiangmurong]

.header { width: 100%; height: 70px; background-image: url(Images/header-bg.gif); border:1px solid #000 }
.header .logo {height: 70px; float:left; background: url(Images/logo.gif) no-repeat; border:1px solid #f60 }
.header .title { margin-left: 220px; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right;  border:1px solid #999; float:left}

[碧海情天-赵亮]

.header .logo {width:100%; 这个100%肯定不对，应改成auto。

而.header .title { margin-left: 220px;好像也有问题,既然想让title紧跟着logo，为什么还要设margin-left为那么大呢？

鉴于CSS设置和楼主所描述的出入这么大，建议楼主还是找个专业的美工来做这部分的工作吧，自己专心去写程序。

[xiaoxiaoo7]

.header .logo {width:100%;}直接把宽度100%改为自动的不可以吗 ？width:auto;

[md5e]

.header { width: 100%; overflow:hidden; height: 70px; background-image: url(Images/header-bg.gif); }
.header .logo {width:auto; min-width:220px; height: 70px; float:left; background: url(Images/logo.gif) no-repeat; border:1px #000000 solid; }
.header .title { margin-left: 220px; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right;border:1px #000000 solid; }

[md5e]

    <div id="header" class="header" runat="server">
	  <div id="dv_body" style="width:900px; height:72px;">
        <div id="logo" runat="server" class="logo">
       adfadfadf
	</div>
        
        <div class="title" id="title">
            <asp:Label ID="lblMsg" runat="server" Font-Bold="true" ForeColor="Red"></asp:Label>
            <pu:Language ID="lng" runat="server" />
        </div>
	  </div>	
    </div>
     <script>
     	document.getElementById("dv_body").style.width= (document.getElementById("logo").offsetWidth +  document.getElementById("title").offsetWidth + 20) +"px";
	alert(document.getElementById("dv_body").style.width);
     </script>

     

[jlds123]

两个小div分别向左右浮动

[Iamagril]

直接加 float:left ,估计是 第一个层 width:100% 引起的，说明你一行放不下，两个层是在一行中，但第一个层的东西太大，一行放不下，自动转到下一行了

[zou_changcheng123]

直接将.logo的宽度改为auto就行了

[ms]

.header .logo 的width:100%不合理，他和title是同级的，他都100%了，title咋办，只好屈居下一行。
应该是.logo 的width:auto

[whb2597758]

div 默认 width是 100% ， 里面两个DIV最好是 width:auto; float:left;

即可实现！

[喝完牛奶好睡觉]

路过 帮顶

[【Help】]

.header .logo {width:100%; height: 70px; clear:left; background: url(Images/logo.gif) no-repeat; }
.header .title { margin-left: 220px; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right; float:right;}

[小伙写代码]

    
    .header { width: 100%; height: 70px; background-image: url(Images/header-bg.gif); }
    .header .logo { height: 70px; float:left; background: url(Images/logo.gif) no-repeat; }
    .header .title { margin-left: 220px; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right; float:left }

[xueyifengok]

如果左边的div宽度跟又不div宽度总和超过了大div宽度的话，自然会跑到下面请的吧

[怎么来这一出]

.header { width: 100%; height: 70px; background-image: url(Images/header-bg.gif); }
.header .logo {max-width:100px; height: 70px; float:left; background: url(Images/logo.gif) no-repeat; }
.header .title { margin-left: 220px; width:200px; float:left; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right; }

设定logo的最大宽度，然后设定title的宽度，设置左浮动就行。

[韩小婼]

[luoxj_win]

<style type="text/css">
*{margin:0; padding:0;}
.cl{clear:both;}
.header{width:100%; height: 70px; background-color:#CCC; padding:10px;}
.header .logo{ float:left; width:300px;background-color:#09F;height: 70px; color:#FFF;}
.header .title{float:left; width:400px;background-color:#999;height: 70px;}
</style>
</head>

<body>
<div class="header">
<div class="logo">

LOGO width:100%;这种设置,想要实现你想要的效果，显然不可取，
最好设置个具体宽度，而且你要知道.logo 和.title的宽度和不超过.heade宽度 
<br />看来你没明白width:100%;怎么用.
logo的width:100%;，等于logo的宽度跟header一样了
</div>

<div class="title">
.logo 要float:left;而且.title也要float:left;
</div>

</div>
</body>