原文：同一行多个div宽度自适应布局
主要运用到的是：布局神器display:table cell 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做： 自动平均划分每个小模块，使其一行显示 第二个案例我们先看看图： 遇到上面这种布局，一般会用float来做，或者把每个li设置成display:inline block 来做，并且都要设置给他们设置一个宽度，而且 ...
2016-08-26 16:38 0 6771 推荐指数：
相关推荐
Css3 常用布局方式 一行两列&高度固定&某列宽度自适应 方案有很多种，根据自己的喜好和实际场景选择方式 一、float +margin 方式 （推荐） 此方式，使用度高，扩展强，兼容性好。 使用到垂直方向居中，参考：CSS网页布局垂直居中整理 示例1： css ...
使用float:left，也可以使用display : inline-block，可以使多个div在同一行显示。 示例如下： 注意：记得清除浮动，不然后续会出现偏差。 效果如下： ...
对于div自适应宽度，网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后，不指定其float属性或将float属性指定为none，比如三栏布局居中的一栏为自适应宽度，就可以这样来定义三栏div： 效果如下： 但是如果我们增加中栏的文字内容，并且为其添加边框 ...
一、浮动布局+百分比 该样式兼容性较好，但是无法实现当里面的列增多时比例也随着变化，必须手动修改，当然你也可以使用一个JS来调整了。 二、行内元素（inline-block）+百分比 三、display:table + display:table-cell 我们知道表格可以根据内容 ...
html: <div class="container"> <div class="left"> left固定宽度200px </div> <div class="right"> </div ...
使用style里的flex属性 默认情况下，一个div独占一行 使用css选择器给外层div加上以下flex属性，则该div的子div可以在同一行中显示， 关于flex字段: https://developer.mozilla.org/zh-CN ...
有时候，我们可能会产生多个div标签横向排列而不换行的需求，具体有以下几种实现方法： 1. 同级div设置display:inline-block，父级div强制不换行例如： <html> <head></head> <body> < ...