CSS网页布局入门教程6：左列固定，右列宽度自适应

共有 61 位网友发表了评论　我要评论..

xiejun(183.20.*.*) 发表于：2011-06-30 22:40:58

在right的里面定义width为auto值这样也是可以的啊

管理员回复：默认就是auto

qq375984181(119.178.*.*) 发表于：2011-01-19 12:06:50

你好，将右侧块高度设置比左侧快高的时候，就可以看出来，左侧 块的下面有 右侧的边框，字的话不知道会不会也显示进去，出现乱版

wangsuifeng(61.133.*.*) 发表于：2011-01-13 08:58:46

老师你好,我这个问题找了几个地方也不知道应该发在哪里,希望在这个地方能够得到老师的指教: <div class="sidebar1 sidebar"> <h2><span>产品</span>导购</h2> <ul> <li><span>语音业务：</span><a href="#">普通电话 | 语音数字中继</a></li> <li class="tw"><span>语音业务：</span><a href="#">普通电话 | 语音数字中继</a></li> <li class="th"><span>语音业务：</span><a href="#">普通电话 | 语音数字中继</a></li> </ul> </div> 在这个代码中div,h2,ul,li{padding:0;margin:0;},sidebar1{width:228; height:258px;} h2{height:31;} 当我设置h2的padding-left:8px;时,h2的宽度没有什么变化,可是当我设置h2{padding-left:4px;}时,h2的宽度发生了变化,致使h2的背景从高度上越界了,最后还是设置了h2{line-height:25;}才让h2和上边界有一定的距离. 还请老师指教,在这里为什么不能设置h2的padding-top,如果老师还不是很清楚我的这一个问题的话,还请老师把邮箱留下,谢谢

管理员回复：padding-left也算在总宽度里边的

faildd(123.138.*.*) 发表于：2010-12-26 00:49:08

教材简单明了，还能在线修改运行实验，太棒了。一口气看了3个小时。明天继续

管理员回复：欢迎

642256040(115.193.*.*) 发表于：2010-11-11 17:11:34

你好我就是想问下，如果想改为右列固定，左列宽度自适应，是不是也更div的定义顺序有关。我用下面的该法， #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 300px; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; float: right; height: 300px; width: 200px; }但是这样不行，我改变div顺序以后才行。

管理员回复：应该不用改顺序的

楠岢(118.249.*.*) 发表于：2010-08-29 14:26:52

为何把#right{height:400px} 后，包含#left的内容

管理员回复：不明白你想说什么

keen10(121.33.*.*) 发表于：2010-08-21 01:04:03

你好，为什么会不可以设置width属性呢，设置后，另一个float:none的div就很不听话地缩在第一个div下面了，而且文字却浮在下面呢？

管理员回复：你设置宽度还叫自适应吗

yjhappy(125.34.*.*) 发表于：2010-05-17 08:17:32

站长，ie6下的3px怎么去掉哇

管理员回复：http://www.aa25.cn/layout/查看该页底部

yzg(123.14.*.*) 发表于：2010-04-26 11:28:31

教程是没任何问题的我看过了， 需要调整到右侧就把left改为right, 然后调整需要固定的区块的高低，比方说右边不动那就设置右边为固定值左边 删除掉宽度，只定义一个height就可以了，

日日日(123.14.*.*) 发表于：2010-04-26 11:25:20

大点的

zhaofenfen(218.249.*.*) 发表于：2010-04-19 22:03:42

我用IE8浏览为什么还会出现小空隙?

管理员回复：应该不会的，3px bug只有IE6会有

jerry(218.18.*.*) 发表于：2010-04-13 14:50:36

sakuar(222.211.*.*) 发表于：2010-03-02 11:32:18 我也想问wimer提的那个问题，把float改成right也不行。直接就把right挤到第二行去了 把摆放的位置换过来

管理员回复：把html代码中的两项调换下位置

oushoulong(61.142.*.*) 发表于：2010-03-28 09:16:04

你好，我也想问下为什么左边那个要left浮动，右边那个不要浮动呢？还有中间那里有点小空隙，都没有设置3px啊。

管理员回复：当一个浮动后，就脱离了原有的文档流，这样下边的不就上来了。有小空隙那是IE6的3像素bug

sakuar(222.211.*.*) 发表于：2010-03-02 11:32:18

我也想问wimer提的那个问题，把float改成right也不行。直接就把right挤到第二行去了

管理员回复：请看本站css布局实例频道相关结构的代码

wimer(113.93.*.*) 发表于：2010-02-28 17:55:47

为什么两个框之间会有小的间距?

管理员回复：可能是3px的问题

wimer(61.143.*.*) 发表于：2010-02-24 16:39:30

本课的内容已经学习并做出效果来了，但还有一个问题就是：版主说也可以是左列宽度自适应，但我把左右代码换了还是不行，两个方框一直分在两行。不知是怎么实现左列宽度自适应，请版主多指点。在此先谢过了。 说句真心话，本系列教程真的做的很好，通俗易懂，很容易就看懂了，多谢版主出了这么好的教程

管理员回复：把float:left改为float:right试试

957239918(125.39.*.*) 发表于：2010-02-08 07:42:09

学习了 效果出来了

在路上(210.15.*.*) 发表于：2010-02-06 20:49:29

很好~~很强大~很详细~易懂

管理员回复：常来哟

财富之门(122.70.*.*) 发表于：2010-02-05 21:37:21

会了！看7去，谢版主

BB(222.166.*.*) 发表于：2010-01-31 18:46:14

請問一下,是否因為右列不輸入數值因為就會默認成100%嗎?

BB(222.166.*.*) 发表于：2010-01-31 18:46:13

請問一下,是否因為右列不輸入數值因為就會默認成100%嗎?

管理员回复：不浮动的情况下

小方(125.120.*.*) 发表于：2010-01-29 21:01:44

站长，为什么在right的样式里加个float: left，right就不会宽度自适应了？

管理员回复：当一个元素浮动后，它会以能容纳下它里边内容的最小宽度显示

dyh(61.163.*.*) 发表于：2010-01-15 13:57:57

这个网站是我至今看到最好的css div制作教程最详细，最好的。谢谢站长！

管理员回复：不客气

雪儿(125.83.*.*) 发表于：2010-01-14 17:17:35

I'm appreciate you

Guest(58.252.*.*) 发表于：2010-01-10 17:27:00

这个网站真的好好耶，我看到了很多不知道的东西，真的太感谢站长了！！一下子心情好开心，你可是我的幸运星哦，成功之后不会忘记你的

管理员回复：好呀，我可等着这一天哟

wtz_227(61.178.*.*) 发表于：2010-01-06 12:59:00

感谢站长，真是好东西

管理员回复：不客气，欢迎常来

Guest(113.68.*.*) 发表于：2010-01-03 09:44:08

左边的框把右边挤下去了 怎么办啊？

管理员回复：对照本例的源码查找原因

尘埃(124.16.*.*) 发表于：2009-12-15 16:29:45

这个很好用，谢谢！

管理员回复：不客气

绿芥末(122.200.*.*) 发表于：2009-12-01 16:28:47

代码都没问题在THE WORLD浏览器上显示正常可是IE上不行验证说“浮动下降”问题

管理员回复：浮动下降？第一次听说

小鱼(222.216.*.*) 发表于：2009-11-13 16:58:06

为什么上一章两个DIV是紧贴在一起的，这一章的代码除了宽度改变外没有别的变动，怎么就有了“间隔”呢？谢谢站长的无私奉献！

管理员回复：会不会是IE6的3像素bug

小C(218.56.*.*) 发表于：2009-11-06 15:39:57

站长，我爱死你了。哈哈，以前以为这个很难，被站长这么滴一写，原来很简单。

管理员回复：^_^

Guest(222.177.*.*) 发表于：2009-10-15 16:13:07

我的2个div怎么重叠在一起，浮动也不行

管理员回复：应该不会的呀

Glow(123.174.*.*) 发表于：2009-10-12 10:12:55

既然是去掉了宽，那右列就直接变成占据余下全部宽了吗？（即除去200PX就都是右列的？）那用%行吗？设右列宽20%

管理员回复：试下吧，好像不行

轮回(221.11.*.*) 发表于：2009-10-07 11:40:09

我在设置左边自适应宽度，右边固定的时候，右边跑到下面去了？

管理员回复：把两个div的顺序换下

吹雪(192.168.*.*) 发表于：2009-09-28 18:13:01

为什么在#right中加入float: left;就无法实现右侧宽度自适应了呢？

管理员回复：当一个元素浮动后，就会以能容纳下内部元素的最小宽度显示

无名(219.139.*.*) 发表于：2009-09-21 15:32:57

右列固定，左侧自适应的实例这样对么？和层的顺序有什么关系？ 右列——宽度(AA25.CN) 左列——宽度自适应(AA25.CN) #right { background-color: #E8F5FE; border: 1px solid #A9C9E2; float:right; height: 300px; width: 200px;}#left { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 300px; 这个地

管理员回复：留言有字数限制的，下次注意写主要的，或者分开留言

刘忙(218.79.*.*) 发表于：2009-09-03 09:05:05

为什么按照老师的代码，我电脑上显示的右边很窄，并没有撑满右半部分？是不是右侧的需要设定？

管理员回复：应该不会的，估计是你的代码问题

calm(211.101.*.*) 发表于：2009-08-21 10:34:23

呵呵，有个疑问，还是关于浮动的问题，左侧浮动后，左侧元素应该是块状元素，右侧没有设置浮动，自动跟在左侧后面，那这样是不就是内联元素了呢？还有就是如果把右侧加上浮动反面二行显示了，即使加上浮动也应该是跟在左侧后面呀？为什么加上浮动反面成了二行吗？不懂了请教一下。

管理员回复：内联元素是不能设置宽度和高度的，而块级元素可以；当一个元素向左浮动后，那么它的右侧将不再占据，下方的文档流自动来填充（前提是右侧空间足够下方元素使用时）；此时只是文档流改变，而它本身还是个块级元素特性，还可以设置宽度和高

瓜子(123.123.*.*) 发表于：2009-08-06 11:18:23

右列固定，左侧自适应的实例这样对么？和层的顺序有什么关系？ 右列——宽度(AA25.CN) 左列——宽度自适应(AA25.CN) #right { background-color: #E8F5FE; border: 1px solid #A9C9E2; float:right; height: 300px; width: 200px;}#left { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 300px;

管理员回复：这样可以实现，但#right的层需放到#left前边

少爱(60.1.*.*) 发表于：2009-07-27 10:35:01

为什么右边没有设置浮动，他就会跟到左边后面，而且中间还有距离？您在上面回答的？为什么会产生这种效果那？中间的空隙是怎么产生的

管理员回复：因为当一个块状元素浮动后，它不再占据一行的位置，这时下边的文档流会自动跑到当前文档的右边。中间的空隙得看具体代码才知道。

21岁的女孩(211.142.*.*) 发表于：2009-06-11 15:27:43

为什么右边没有设置浮动，他就会跟到左边后面，而且中间还有距离？不明白，初学，请教高手.

管理员回复：他跟到左边后边不就是左右两列了吗，如果还在下边就不叫左右布局了。中间空隙只能从源代码看出来，空隙小了可能是3像素bug

新手(61.190.*.*) 发表于：2009-05-24 21:05:45

为什么右列没有设置flaot属性，它也能紧接着左列显示呢

管理员回复：因为左列浮动后，左列的右侧可以放上东西了，这时右列就跑上来了

初学者(219.239.*.*) 发表于：2009-05-15 15:09:21

很奇怪，我的程序中，左列窄，右列宽，很宽，我设置其用滚动条显示。当我把右列宽度设成百分比，显示是正常的，左右列显示在一行。但是如果我把右列的浮动去掉，宽度去掉，这时右列宽度全部显示，于是被挤到第二行了，这是怎么回事呢？我对浮动的概念有些一知半解。

管理员回复：默认右列不设置宽度的话应该不会显示滚动条。不太了解你的情况了

Guest(121.5.*.*) 发表于：2009-05-12 00:40:32

那50种布局查看源文件时只有html代码 没有css代码 在别的地方用吗？

管理员回复：源文件里有css的链接呀

Guest(121.5.*.*) 发表于：2009-05-11 23:29:41

本站提到的50种布局 怎么没有相关的代码呀

管理员回复：你点去有下载地址。查看源文件不就是代码吗

Charms(123.146.*.*) 发表于：2009-05-11 20:25:30

请问是不是一定要设置某列宽度为200px,其余一列的宽度和浮动去掉才能自适应啊

管理员回复：也可以设置为百分比呀

tracy(116.30.*.*) 发表于：2009-04-21 16:28:24

没有找到左列自适应右列固定的实例哟，可不可以在这里给出个实例？还有，为什么右列设为不浮动呢？

管理员回复：你把它翻过来不就是了，右例浮动后，它就没法自适应了。因为当一个元素浮动后，如果不设置宽度，它会在允许的范围内以最窄显示

Guest(60.181.*.*) 发表于：2009-02-22 01:22:46

左列--宽度自适应，右列固定。用方法怎么实现不了管理员回复：你去本站的css版式布局频道去找，有左列自适应右列固定的实例 我在搜索里找不到,管理员能告诉下怎么弄么?我把左列不设置宽度怎么是显示小框

管理员回复：编号是32和37的就是这样的例子

776w(58.42.*.*) 发表于：2009-01-17 21:53:51

管理员，6像素的距离，设置左边DIV的margin-right参数应该也是一样的效果吧？

管理员回复：你可以试试哟

Guest(58.221.*.*) 发表于：2008-12-26 10:42:16

如何让两列之间有段空隙，比如6PX左右的

管理员回复：设置右列的margin-left:206px;如果左列是200px的话。但这样有个问题，需要解决IE6下的3px bug

嘻嘻哈哈(123.117.*.*) 发表于：2008-12-17 15:19:18

左列--宽度自适应，右列固定。用方法这么实现不了

管理员回复：你去本站的css版式布局频道去找，有左列自适应右列固定的实例

smmlfl(123.151.*.*) 发表于：2008-12-15 17:41:42

为什么要设为不浮动呢？？

管理员回复：因为div是块级元素，默认占据一行。设置浮动后，第二个div才能跑到第一个右侧

天蓬元帅(222.134.*.*) 发表于：2008-12-13 19:35:37

left 和right之间有了很小的间隙，请问这是怎么现实的啊？

管理员回复：你是说是想要有个空隙还是指这个为什么有个空隙？在IE6下有空隙的话是因为3px bug造成的。有关3px的问题你可以参考http://www.aa25.cn/layout/下边的常见问题中找到答案

YY(119.122.*.*) 发表于：2008-12-08 15:51:15

你好！我想问一下，如果要居中代码要怎么改呢？

管理员回复：请看下一节教程：CSS网页布局入门教程7：二列固定宽度居中

Guest(124.161.*.*) 发表于：2008-12-05 20:32:23

话说浮动是指什么意思?FLOAT吗?

管理员回复：是的

Guest(222.90.*.*) 发表于：2008-12-05 09:20:57

感谢管理员写这么好的教程！！！！！！！！！！！！管理员，把你QQ留下！^_^

管理员回复：网站最下边留有本站的交流群，大家可以在群里交流呀

Guest(60.215.*.*) 发表于：2008-12-01 10:28:31

不知道为什么 我的右列的 向左浮动(float:left;) 去掉不去掉都是一样的效果

管理员回复：本例中右侧好像没有向左浮动呀，如果向左浮动的话宽度就不会自适应了

谭颖(222.216.*.*) 发表于：2008-11-26 06:26:11

还是有区别的....(float:left;)有这句的话 2列之间没有缝隙，有的话就没缝隙 另外第2列的宽度也有不同

管理员回复：呵呵，实践出真知嘛。自已一试就明白了。还是挺细心的，2列之间的空隙只有在IE6下有，IE7和FF下就没有了，这是IE6的3像素bug造成的。

谭颖(222.216.*.*) 发表于：2008-11-26 06:11:00

右列的 向左浮动(float:left;) 不用去掉貌似效果不变？有什么区别么？小A站长

管理员回复：区别就是右侧不会自适应宽度了

谭颖(222.216.*.*) 发表于：2008-11-26 06:03:02

小A站长真是每帖必回啊支持一下

管理员回复：有这么多热心好学的朋友，肯定要回复的！同时感谢大家对小站的支持

小4(117.93.*.*) 发表于：2008-11-25 18:03:28

这个是告诉我们可以自行改变宽度 是吗?是随着浏览器而改变的不是固定的对吗？

管理员回复：是的，是随浏览器改变而改变，你把浏览器窗口拖大拖小就看出来了！