css

#main {

margin-right:220px;

}

#side {

float:right;

width:200px;

}

使用上面的css可以达到2列的效果,但是右侧的div会在main的下方。

有什么办法可以让它与main并排吗?

main main main main main main main main main main main main main main main main main main main main main main main main

SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE

回复讨论(解决方案)

Insert title here

main main main main main main main main main main main main main main main main main main main main main main main main

SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE

谢谢,这样是可以的。

还是想问一下为什么float:right无法达到这个效果。有什么需要注意的地方?

把side放在main前面,css保持不变,结果就显示正确。

不明白原因。

Insert title here

SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE

main main main main main main main main main main main main main main main main main main main main main main main main

应该是文本流的问题, 先后读的div有不同布局

无论怎样,代码解析总归是自上而下的

当遇到块属性元素的时候,由于块属性元素本身独占一排,无论怎样的情况下。

那么就要讲下,什么是浮动?

可以这么定义,浮动可以使元素脱离文档流,按照指定的方向移动,直到相邻浮动元素或者父级边界停了下来

1.块元素放在上边,浮动放在下边 由于自上而下解析,遇到块元素独占一排,和父级同宽,接下来遇到浮动元素,那么应该在块元素下边 发生位移,直到右边父级边界

2.块元素放下边,浮动放上边 先遇到浮动,那么脱离文档流,发生位移直至右边父级边界,那么接下来的div为块,如果你不清除浮动,肯定要挤上来的,因此会在一排显示

我不止一次的在强调,在做页面布局时,一定注意,怎么才能规范的去布局,怎么才是正常一种思路,而不是说 我试了这个布局,加了某条样式,达到了我想要的结果,然后会引发其他的问题

如果想要让两个块元素在同行内显示,请都加上浮动

也许很多人会做如下处理,左边的块浮动,右边的div不设置浮动,靠后边元素挤上来实现类似的效果,很多人可能考虑写这样的代码

标准浏览器下,不会有什么问题,然而在IE6下两个块元素之间会有3px的间隙bug,而此问题是没法修复的,除非统一浮动

虽然你的代码和上面的有一定的区别,但是我还是习惯归为一类,而此类问题的解决 就是统一浮动

这个……还是用js控制比较好。

html一边自动宽度,有2列,希望右侧固定宽度,左侧自动宽度。_html/css_WEB-ITnose...相关推荐

  1. html5自动完成是什么,HTML5中form如何关闭自动完成功能的方法

    什么是HTML5的form自动完成功能? 首先,HTML5 中有个新属性autocomplete ,autocomplete 属性规定表单是否应该启用自动完成功能,它自动完成允许浏览器预测对字段的输入 ...

  2. HTML表格修改字段,HTML表格 – 更改列中单个单元格的宽度

    有没有更优雅的解决方案来实现与此相同的效果? 我到目前为止的代码是这样的: Table Test table { border-collapse: collapse; } td { border: s ...

  3. antd table 宽度_table固定列的宽度,超出部分用…代替(针对普通table和antd)

    一. 实现思路 我们都知道让溢出内容变成...,只需要以下: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 表格里的内容 ...

  4. pandas使用pad函数向dataframe特定数据列的每个字符串添加后置(后缀)补齐字符或者字符串、向所有字符串的右侧填充、直到宽度达到指定要求(right padding)

    pandas使用pad函数向dataframe特定数据列的每个字符串添加后置(后缀)补齐字符或者字符串.向所有字符串的右侧填充.直到宽度达到指定要求(right padding) 目录

  5. CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除

    CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除 实例: .add{width: calc(100% - 10px);height: calc(100% - 10px) ...

  6. Excel快捷的把列宽调整到合适的宽度

    Excel快捷的把列宽调整到合适的宽度 第一种方式 选中需要调整列宽的那些列 把光标放到任意选中的两列之间 等光标变成左右箭头的时候,双击鼠标左键 第二种方式 1.选中需要调整列宽的那些列 2.点击[ ...

  7. 在excel表中插入一行(或一列)后vba代码如何自动修改?

    一.问题提出的引述连接: 插入一行后vba如何自动修改 如何在excle单元格中编写的vba语言当插入一列的时候公式也自动改变? 二.解决办法: 1.把单元格或单元区域选中. 2.然后给单元格命名. ...

  8. b列根据A列排序 并且后面数据自动跟随

    b列根据A列排序 并且后面数据自动跟随对齐 不需要公式. 在a列前面插一个辅助列,按序号填充.选择序号和原来的a列排序,以原来的a列升序. 然后再把原来的b列和其他列升序. 最后全选,按第一列(带编号 ...

  9. excel一列求和_Excel教程:自动求和的3个坑,你有没有被坑过?_搜狐汽车

    微信扫码观看全套Excel.Word.PPT视频 哈喽,大家好!说起我那表姐也是一位拥有十年经验的老财务了.可她最近却在自动求和上出了错.可能有的小伙伴会纳闷了"一点即可得出结果的自动求和都 ...

最新文章

  1. 微软为什么从 C/C++ 转向了 Rust?
  2. win7下更改设置时间权限
  3. HandlerMappings
  4. python怎样把两个图画到一起_python实现两张图片拼接为一张图片并保存
  5. Csharp+Asp.net系列教程(四)
  6. Java 8中HotSpot选项的改进文档
  7. 第二阶段冲刺站立会议09
  8. flutter绘图基础之三阶贝塞尔曲线cubicTo
  9. 华为交换机VRP用户界面配置及Telnet登录实验
  10. css02基本选择器
  11. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-1.SpringBoot整合微信支付开发在线教育视频站点介绍...
  12. ASP.NET中使用JQuery生成登陆验证码
  13. 68个经典励志小故事|哲理小故事,让你终身受益(1)
  14. 【阿里云】云解析DNS
  15. 怎么挑小红书koc?什么是小红书koc
  16. Allegro通孔焊盘制作
  17. github博客迁移——图床搭建
  18. 漫谈程序员系列:伤心小箭,你中了几枝
  19. Linux嵌入式驱动开发零基础入门集合(STM32过渡到Linux嵌入式)
  20. c语言 爱课程,哈工大8门资源共享课正式上线“爱课程”网站

热门文章

  1. 双链表插入、删除操作单步解析(十四)
  2. ffmpeg (二):ffmpeg结合SDL2.0解码视频流
  3. Android 关机(reboot)流程 -- sys.powerctl
  4. 记录android离屏渲染的一些资料
  5. tensorflow之FIFOQueue
  6. tensorflow之control_dependencies
  7. windows系统bat批处理 开机一键多个程序
  8. 图像特征计算与表示——基于内容的图像检索
  9. Uncaught ReferenceError: jie is not defined
  10. 年假计算器在线_死亡计算器 和 年龄计算器