css问题

takako_mu 2011-06-27 04:50:52
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会成上下关系。
...全文
343 42 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
42 条回复
切换为时间正序
请发表友善的回复…
发表回复
luoxj_win 2011-07-17
  • 打赏
  • 举报
回复

<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>
韩小婼 2011-07-17
  • 打赏
  • 举报
回复
怎么来这一出 2011-07-08
  • 打赏
  • 举报
回复
.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的宽度,设置左浮动就行。
xueyifengok 2011-07-08
  • 打赏
  • 举报
回复
如果左边的div宽度跟又不div宽度总和超过了大div宽度的话,自然会跑到下面请的吧
小伙写代码 2011-06-30
  • 打赏
  • 举报
回复
    
.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 }
【Help】 2011-06-30
  • 打赏
  • 举报
回复
.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;}
  • 打赏
  • 举报
回复
路过 帮顶
whb2597758 2011-06-30
  • 打赏
  • 举报
回复
div 默认 width是 100% , 里面两个DIV最好是 width:auto; float:left;

即可实现!
ms 2011-06-29
  • 打赏
  • 举报
回复
.header .logo 的width:100%不合理,他和title是同级的,他都100%了,title咋办,只好屈居下一行。
应该是.logo 的width:auto
zou_changcheng123 2011-06-29
  • 打赏
  • 举报
回复
直接将.logo的宽度改为auto就行了
Iamagril 2011-06-28
  • 打赏
  • 举报
回复
直接加 float:left ,估计是 第一个层 width:100% 引起的,说明你一行放不下,两个层是在一行中,但第一个层的东西太大,一行放不下,自动转到下一行了
jlds123 2011-06-28
  • 打赏
  • 举报
回复
两个小div分别向左右浮动
md5e 2011-06-28
  • 打赏
  • 举报
回复

<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>

md5e 2011-06-28
  • 打赏
  • 举报
回复

.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; }


xiaoxiaoo7 2011-06-28
  • 打赏
  • 举报
回复
.header .logo {width:100%;}直接把宽度100%改为自动的不可以吗 ?width:auto;
  • 打赏
  • 举报
回复
.header .logo {width:100%; 这个100%肯定不对,应改成auto。

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

鉴于CSS设置和楼主所描述的出入这么大,建议楼主还是找个专业的美工来做这部分的工作吧,自己专心去写程序。
jiangmurong 2011-06-28
  • 打赏
  • 举报
回复

.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}


jiangmurong 2011-06-28
  • 打赏
  • 举报
回复
之前也有跟LZ同样的问题~~~
shirlydyh 2011-06-28
  • 打赏
  • 举报
回复
.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;}

你改成这样试试

  • 打赏
  • 举报
回复
可以用jquery控制,可以不考虑浏览器差异
加载更多回复(21)

62,244

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧