当前位置：编程学习 > C#/ASP.NET >>

css问题

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会成上下关系。 --------------------编程问答-------------------- logo  width:100%; ？ --------------------编程问答-------------------- 右边那个div同样要加上float:left; --------------------编程问答-------------------- .header .title { margin-left: 220px; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right; display:inline; }

换成这个看看
--------------------编程问答--------------------
引用 2 楼 ojlovecd 的回复:
右边那个div同样要加上float:left;

加了之后，依旧不行。 --------------------编程问答--------------------
引用 3 楼 wxr0323 的回复:
.header .title { margin-left: 220px; height: 70px; background: url(Images/header.gif) no-repeat; text-align: right; display:inline; }

换成这个看看

加了display:inline;后，右边的div依旧在下面，这次是挤成了丝状。。。 --------------------编程问答--------------------
引用 1 楼 hdngo 的回复:
logo width:100%; ？

？？ --------------------编程问答-------------------- 里面两个div用浮动，float:left;不过如果两个div的宽度加起来超过啦外面的div，那么右边的div会被挤到下一行！

这个问题怎么不放到css板块去啊！ --------------------编程问答-------------------- 帮顶下 --------------------编程问答--------------------
引用 6 楼 takako_mu 的回复:
引用 1 楼 hdngo 的回复:
logo width:100%; ？

？？

logo的那个width:100%去掉呢？ --------------------编程问答--------------------
引用 7 楼 qingyun1029 的回复:
里面两个div用浮动，float:left;不过如果两个div的宽度加起来超过啦外面的div，那么右边的div会被挤到下一行！

这个问题怎么不放到css板块去啊！

已在那边另开新帖，谢谢提醒！ --------------------编程问答-------------------- 建议用table加div 这样也容易控制 --------------------编程问答--------------------
这个左边宽度好像就得固定 --------------------编程问答-------------------- http://ued.koubei.com/?p=1225

参考，必定解决，可以结贴了 --------------------编程问答-------------------- 






.header { width: 100%; height: 70px; background-image: url(Images/header-bg.gif); }

.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; }
--------------------编程问答--------------------

试试看。。 --------------------编程问答--------------------
加的那个宽设为0也可以 --------------------编程问答--------------------
引用 14 楼 porschev 的回复:
CSS code




.header { width: 100%; height: 70px; background-image: url(Images/header-bg.gif); }
.header .logo { width:auto !important; width:1px; min-width:1px;overflow:visible; height: 70px; f……

+++ --------------------编程问答-------------------- 最好的解决办法就是给BODY加个宽度 肯定行 --------------------编程问答--------------------
其实你不用这个布局。。

如果是个table布局就应该没这个事。。

它是自适应宽度的。。 --------------------编程问答-------------------- .header .logo 这个宽度也100% ？你右边不放东西了？ --------------------编程问答-------------------- 都不設寬度,設定float:left就成了 --------------------编程问答-------------------- .header .logo {width:100%;}直接把宽度100%改为自动的不可以吗 ？width:auto; --------------------编程问答-------------------- 


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



     
--------------------编程问答-------------------- --------------------编程问答-------------------- 两个小div分别向左右浮动 --------------------编程问答-------------------- 直接加 float:left ,估计是 第一个层 width:100% 引起的，说明你一行放不下，两个层是在一行中，但第一个层的东西太大，一行放不下，自动转到下一行了 --------------------编程问答-------------------- 可以用jquery控制，可以不考虑浏览器差异 --------------------编程问答-------------------- .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;}

你改成这样试试

--------------------编程问答-------------------- 之前也有跟LZ同样的问题~~~ --------------------编程问答-------------------- 


.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设置和楼主所描述的出入这么大，建议楼主还是找个专业的美工来做这部分的工作吧，自己专心去写程序。 --------------------编程问答-------------------- .header .logo 的width:100%不合理，他和title是同级的，他都100%了，title咋办，只好屈居下一行。
应该是.logo 的width:auto --------------------编程问答-------------------- 直接将.logo的宽度改为auto就行了 --------------------编程问答-------------------- div 默认 width是 100% ，   里面两个DIV最好是 width:auto; float:left;

即可实现！ --------------------编程问答-------------------- 路过 帮顶 --------------------编程问答-------------------- .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 }
--------------------编程问答-------------------- 如果左边的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的宽度，设置左浮动就行。 --------------------编程问答-------------------- --------------------编程问答-------------------- 


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


补充：.NET技术 ,  ASP.NET

上一个：C++结构体在C#中如何翻译
下一个：有没有asp.net api手册啊

更多图片编程知识:
更多C#/ASP.NET疑问解答：
C# 数据采集
jqGrid
VC2010 Unicode字符集下通过ReadProcessMemory跨进程读取SysListView32控件总是乱码
asp生成动画，求各位给个技术建议，或者大致方法。。。。
C#中 如何把excel的数据每一一列的值，赋值给一个一位数组呢
关于多线程同步问题.
怎么做程序小游戏
C#调用C++dll函数出现“尝试读取或写入受保护的内存”
数据同步
缓存与并发
c# 怎么把 torrent 文件 转换成 磁力链接
移动终端、软件系统、服务器关系
请都C#报表调用方式
如何重绘TabControl使其改变背景色
C#调用C++Dll异常
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
如果你遇到编程学习难题：
请访问www.zzzyk.com 试试
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络，