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会成上下关系。
<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会成上下关系。
解决方案 »
- 按钮无刷新页面 实现一个按钮事件
- 大家帮忙看看这个 谢谢!
- 一个项目如何访问另一个WEB项目web.config中的连接字符串?
- HTTP上行中文乱码?
- 请问中文是如何变成link里的乱码的
- 如何把页面内容转换为图片?
- 这个javascript是Asp.Net组件生成的,怎么有错啊!setTimeOut那里
- 网站前后台怎样分开
- 关于javascript的小问题,进来吧?
- 奇怪的方法内部使用匿名方法绑定TreeView控件的SelectedNodeChanged事件的问题
- 网页上用户需要在工厂车间背景图上自由增删设备的图标(就是button),大虾们说说实现的思路。。。
- 大家现在用什么工具做前端啊?
.header .logo { width:auto !important; width:1px; min-width:1px;overflow:visible; 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; }
其实你不用这个布局。。如果是个table布局就应该没这个事。。它是自适应宽度的。。
.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; }
<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>
.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); 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}
应该是.logo 的width:auto
.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 }
.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的宽度,设置左浮动就行。
<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>