设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 4973|回复: 2

[求助] 一行两div横排,问题。

[复制链接]
发表于 2013-1-17 08:44:42 | 显示全部楼层 |阅读模式
list,自动100%。
left,在左边显示 。做到自适应宽度,包括里面的input框。
right,在右边显示100px宽。
试写了一下css,但是效果使终不对。大家帮忙看看喃。怎么解决。


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">



  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=GBK"/>


  5. </head>
  6. <body>

  7. <div id="list" style="border:solid 1px #ff00cc;clear:both;overflow:hidden;padding:10px;background:#ffcc00;">
  8.         <div id="left" style="float:left;margin:0px 100px 0px 0px;_margin:0px -100px 0px 0px;/*ie6*/border:0px solid #000;">
  9.                 <div id="div1" class="div1" style="border:1px solid #0000ff;overflow:hidden;"><input type="text" name="name_think" id="name_think" value="" size="20" ext_type="string" ext_maxLength="20" ext_name="" ext_null="Y" class="k-ipt-input" style="width:100%;"/></div>
  10.         </div>
  11.         <div id="right" style="float:right;width:100px;margin:0px 0px 0px -100px;_margin:0px 0px 0px 100px;/*ie6*/border:0px solid red;">
  12.                 Right标签…
  13.         </div>
  14.         <div style="clear:both;"></div><!-- 如果这里以后没有元素,必须加这个,以解决ie6bug -->
  15. </div>
复制代码


发表于 2013-1-21 14:05:10 | 显示全部楼层
本帖最后由 happytomcat 于 2013-1-21 14:06 编辑
  1. <!Doctype html>
  2. <html xmlns="系统不让含有url" lang="zh-CN">
  3. <head>
  4.         <title>test</title>

  5.         <style>
  6.                 body,div{margin:0;padding:0;}

  7.                 #list{
  8.                         width:80%;
  9.                         padding:10px;
  10.                         overflow:hidden;
  11.                         background:red;
  12.                 }

  13.                 #left{
  14.                         float:left;
  15.                         width:100px;
  16.                         height:200px;
  17.                         background:yellow;
  18.                         _margin-right:-3px;
  19.                 }

  20.                 #right{
  21.                         width:auto;
  22.                         height:200px;
  23.                         background:blue;
  24.                 }
  25.         </style>
  26. </head>

  27. <body>
  28. <div id="list">

  29.         <div id="left">左边:100px</div>
  30.                
  31.         <div id="right">右边:宽度自适应</div>

  32. 11111111111111111

  33. </div>

  34. 22222222222222222

  35. </body>
  36. </html>
复制代码
发表于 2013-1-21 14:15:44 | 显示全部楼层
ie6和op,其他浏览器没测试,应该问题不大。
这个效果的关键在于:list里面的两div要一个浮动,另一个不浮动;

你错误的地方:

1.你把left、right两个div都浮动了

2.list这个大div要给个百分比宽度(不给应该也行,最好是写上)

3.list样式里面你写了句:clear:both;意思是清除浮动,list这个div的前面如果没有其他浮动元素代码的话这句是多余的(我猜你对清除浮动的理解有误)
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2018-6-20 20:39 , Processed in 0.081821 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表