你的位置:首页 > 软件开发 > 网页设计 > 从三栏自适应宽度布局到css布局的讨论

从三栏自适应宽度布局到css布局的讨论

发布时间:2015-11-28 22:00:33
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo:left ...

从三栏自适应宽度布局到css布局的讨论

      如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应?

      第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo:

left middle right 

      但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦和困难。

      如果不用table布局,那么第二个想到的办法是采用float,让左边的div float left,右边的div float right,如下边所示:

Action 1 先让左右两个div浮动

float left 

      中间还有一个div,如果将中间的div排在第二:

<div style="float:left;">left</div><div>middle</div><div style="float:right;">right</div>

      因为div默认的display为block,如果不设置width的话,块级元素会尽可能多地占用水平空间。如果设置了width: 200px,效果是这样的:

Action 3 右边的div仍然浮动到了第二行

float left 

      第三个div仍然会换行,因为float right会排到当前行尽可能右边的位置,即它的容器盒的边缘或者挨着的上一个float的元素,如果当前行没有空间的话,会不断地往下移,直到有足够的空间。由于middle是一个块盒,即使设置了width,当前行的空间也会被占用,所以right只能到下一行才有空间。

      同时注意到middle虽然设置了200px,但是看起来和left一样是100px宽了。这是因为float了的元素虽然在正常的文档流之内,但是只是让相邻(非float)的元素的内容围绕着它排列,它仍然占据相邻元素的background和border空间。如果给middle添加一个白色的border,那么看起来是这样的:

Action 4 浮动的元素占据了文档流相应元素的背景和边缘空间

float left 

       明显看到,float left的元素占据了middle的background和border的空间,同时middle的内容围绕着left排列。理解这点很重要。

       假设middle里面有个p标签,而p标签的内容比较长,那么围绕的效果是这样的:

Action 5 浮动的环绕效果

float left 

      正如上面的注释一样,在float元素的那一行,相邻的元素的内容的宽度将会缩短,以适应float元素占去的宽度,而一旦超过float元素的区域,相邻元素的内容显示宽度就会正常。

      由于默认的div会占一行,所以不能将middle放在第二个div,得放到第三个div。把第二个div和第三个div换一下顺序:

<div style="float:left;">left</div><div style="float:right;">right</div><div>middle</div>

       如果不设置middle的width,那么middle将围绕着left和right环绕,和left一样,right也会占用middle的空间。

Action 7 中间的div围绕着左右的div环绕

left 

       为了让middle和left/right中间有一个margin值,设置下middle的左右margin各为110px,这样就和左右和中间就各有10px的间距:

Action 8 设置中间div的margin值为100px + 10px

left 

       这种办法的优点是实现简单,支持性好。

       这种自适应宽度的原理是利用了float的围绕特性,占据自然文档流的background/border位置。这个围绕特性不仅会影响当前行的内容,还会影响下一行的内容,如下说明:

<p>第一段内容,略<img src='/images/loading.gif' data-original="" style="float:left;"></img></p><p>第二段内容,略</p>
left

      从上面可以看到:这样实现,导致left的内容被挤出目标区域,因为正如上面所说,middle占据了left的背景空间,上面的情况是把它占满了,left内容只能overflow了。所以这样实现是有问题的,得让left也向左float一下,这样left就紧挨在middle后面了,由于middle占了100%的宽度,所以再让left向左边margin了-100%后,left就刚好在最左边了。

<div style="width:100%; float:left;">   <div style="margin: 0 100px;">middle</div></div><div style="float: left; margin-left: -100%;">left</div>
left

       注意这里,虽然left float之后看起来也是被排到下一行了,但和默认的div独占一行是不一样的。float之后的left仍然和middle是同一行的,因为空间不足的时候,float只是把当前行盒的空间撑大,就和一个div块盒里面有很多个display为inline-block的行内级盒是同样的道理。例如:

<style>   button{ width: 150px; }</style><div style="width: 300px;">  <button>按钮1</button>   <button>按钮2</button>   <button style="margin-left: -200px;">按钮3</button></div>
left

 

      下面讨论第三种方法,使用display: table-cell

      由于table的展示拥有自适应的特点,因此把需要自适应宽度的middle的display属性设置为table-cell。

<div style="float:left;">left</div><div style="float:right;">right</div><div style="display:table-cell;">middle</div>

      发现table-cell的宽度是根据内容自适应的,这里是要根据浏览器窗口自适应,因此给middle添加一个很大的width就可以了,例如width:2000px:

Action 10 让中间的div使用table-cell自适应宽度

      由于ie6/7不支持display: table-cell,所以如果要支持ie6/7的话,就得用display: inline-block,ie6/7的inline-block和标准不一样,它是用来触发hasLayout特性,使元素拥有布局属性。作用在行内元素,可以使得宽高等设置生效,如果作用在块元素,仅是触发布局特性,还要再设置成inline才是行内块元素,如果不设置inline效果就跟table-cell很像。不一样的地方是:设置了width:2000px,导致太长会换行,因此得用ie6/7的hack,设置*width: auto重新改会width值就可以了:

<style>  .middle{     display: table-cell;     *display: inline-block; /* _和*开头的只有ie6/7会识别 */     width: 2000px;     *width: auto;  }</style><div style="float:left;">left</div><div style="float:right;">right</div><div class="middle">middle</div>

      flex-grow: 1的作用是把middle的宽度置为flex容器的剩余宽度,就达到了自适应的目的。flex的使用不作全面介绍,详情可查看CSS-Tricks: A Complete Guide to Flexbox

      但是flex布局ie的支持性较差,具体查看caniuse.

 

      最后再分析另外一个自适应的例子,某个元素的宽度要根据其它元素的宽度自适应。如下图所示,排名的位数变化可能会很大,导致最右边的文字要自适应:

 从三栏自适应宽度布局到css布局的讨论

       根据上面的一番分析,这个例子就不难实现了,如下面的分析,p标签里的文字宽度就能自适应了:

从三栏自适应宽度布局到css布局的讨论

      

  <div style="width:320px;">    <span style="width:14px;float:left;">排名</span>    <span style="font-size:40px;float:left;">89</span>    

原标题:从三栏自适应宽度布局到css布局的讨论

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。