none
一个父div(width:65%) 包含两个子div ,设置其中一个子div宽度为10px,其他宽度全部分给另一个div,请问如何实现? RRS feed

  • 问题

  • <div style="width:60%;height:100px;background-color:red;">  
    <div style="width:10px;background-color:yellow;float:right;"></div> 
    <div style="background-color:black;width:?"></div> 
    </div> 

    如上所示 ?应该填写什么值达到题目要求的效果?
    • 已移动 Sheng Jiang 蒋晟 2009年3月26日 20:08 客户端HTML问题 (从 ASP.NET 与 AJAX 移动到 Web 相关讨论(IIS,IE8等))
    2009年3月26日 1:23

答案

  • 办法有2个:
    1,采用绝对定位。js动态调整
    2,采取浮动的方法。

    例子
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
     <head> 
     </head> 
    <body> 
    <div style="background:#f00;width:100px"
    <input style="width:100px;height:44px;border:1px solid blue"/><br/> 
    <img style="position:relative;top:-46px;float:right" src="http://i2.social.microsoft.com/Image.avatr?size=Large&user=%u5b5f%u5baa%u4f1a&id=00000000-0000-0000-0000-000000000000" /> 
    </div>ddd 
    </body> 
    </html> 


    孟宪会
    • 已标记为答案 杜宏宇 2009年3月26日 3:52
    2009年3月26日 3:41
    版主

全部回复

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head>  
    <style type="text/css">   
    html,body,div{padding: 0;margin: 0;}   
    </style>  
    </head>  
    <body>  
    <div style="width:60%;height:100px;background-color:red;"
    <div style="width:10px;background-color:yellow;height:90px;float:left;"></div> 
    <div style="background-color:black;margin-left:10px;height:90px;"
    </div> 
    <div style='clear:both'></div> 
    </div>   
    </body>  
    </html> 

    你需要仔细了解一下margin,float的用处

    孟宪会
    2009年3月26日 1:45
    版主
  • 谢谢老师,顺便问一下。假如一个div 的 width=100px,里面有一个input width=100%
                                                                                   还有一个小gif图像,怎么能让这个图像飘浮在input的右边,但是不能撑大div.

    2009年3月26日 2:05
  • 办法有2个:
    1,采用绝对定位。js动态调整
    2,采取浮动的方法。

    例子
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
     <head> 
     </head> 
    <body> 
    <div style="background:#f00;width:100px"
    <input style="width:100px;height:44px;border:1px solid blue"/><br/> 
    <img style="position:relative;top:-46px;float:right" src="http://i2.social.microsoft.com/Image.avatr?size=Large&user=%u5b5f%u5baa%u4f1a&id=00000000-0000-0000-0000-000000000000" /> 
    </div>ddd 
    </body> 
    </html> 


    孟宪会
    • 已标记为答案 杜宏宇 2009年3月26日 3:52
    2009年3月26日 3:41
    版主