CSS网页布局入门教程7：二列固定宽度居中

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

horkings(124.207.*.*) 发表于：2010-12-23 14:22:26: OK ，麻烦站长了。问题解决了。

horkings(124.207.*.*) 发表于：2010-12-23 14:04:10: 站长：首先，我是个菜鸟。问下您，怎么才能把#left和#right放到#layout内部啊，只能是记住站长上边的代码么？还是能像“一列固定宽度”那样通过鼠标点击将他们放进去。谢谢。; 管理员回复：光标在源代码视图里定位到layout里边，然后再插入就是里边了

sisixh2000(125.90.*.*) 发表于：2010-11-21 22:19:23: 只想说一句话：管理员真的是个好人; 管理员回复：谢谢啊，欢迎常来

lpbottle(221.221.*.*) 发表于：2010-07-16 12:04:15: 我总觉得这里的设置是在追求“完美”，刚刚好，我把宽度改成100以后就不居中了，有没有什么办法可以让宽度任意改变之后还能居中呢？; 管理员回复：用表格吧

ping791020(123.15.*.*) 发表于：2010-07-08 11:49:47: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id="zuo">此处显示 id "zuo" 的内容</div> <div id="you">此处显示 id "you" 的内容</div> <div id="zong">此处显示 id "zong" 的内容</div> </body> </html> 老师帮忙看下，怎么都跑到左侧外边了。; 管理员回复：请对照本教程中的源代码查找原因

Jzh(116.11.*.*) 发表于：2010-06-27 02:15:08: 第一个插入 Div标签插入里选：插入点第二个插入Left标签选：在开始标签之后，右边选<Div id="layout"> 表示在上一个标签开始和结束之间插入第三个插入 Right标签选：在标签之后，右边选<Div id="Left">表示为在上一个标签的后面插入我是这样理解的; 管理员回复：多试试，只要能插入到正确位置就行了

zch(111.120.*.*) 发表于：2010-06-17 10:44:34: margin-right: auto;中的auto就可以居中吗？; 管理员回复：还有左侧也设成auto

paul0114(61.62.*.*) 发表于：2010-05-22 02:12:45: 請問站長我照上面教學作，可是每當#layout插入#left後卻不是在中間而是在左下角請問我的錯誤在那裏以下是代碼 <style type="text/css">  </style> </head> <body> <div id="layout"> id "layout"</div> <div id="left"> id "left" 的內容放在這裡</div> <div id="right"> id "right" 的內容放在這裡</div> </body> </html> 謝謝回覆; 管理员回复：如果是点击工具栏上的插入div层按钮的话，请在对话框中选择在内部插入

hanxu2030(61.163.*.*) 发表于：2010-05-18 22:49:40: 为什么margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;替换成margin：0；auto；不行啊！都跑左边去了！替换成margin：auto；0；就行了？margin不是（上、右、下、左）的顺序吗？郁闷中……; 管理员回复：应该是margin：0 auto；两值中间是空格，而不是分号，分号表示一个属性的结束

terryzz(125.122.*.*) 发表于：2010-05-17 21:22:52: 感谢站长的回复哦。那就你的意思，那也是两列的容器id=layout的居中了哦！两列相对于外部容器也不算居中，我layout宽度调大点，里面两个容器是从左到右流的方式排的。那也不是居中列对不？; 管理员回复：对呀，设置layout居中，当然是这个id的元素居中了呀。内部的元素浮动就是让它向左或向右浮动，怎么会居中呢

yjhappy(125.34.*.*) 发表于：2010-05-17 08:20:46: 还是老问题哇外面的div的在ie6和ff下的上边距不一样怎样写在ie6下才兼容; 管理员回复：把边距清除掉

terryzz(218.108.*.*) 发表于：2010-05-14 08:55:34: 站长您好，你这里2列固定宽度居中，有问题吧。容器width=404 左右各202 当然刚好填满了但是把容器高度设大点，宽度大点,width=500px height=400px 这样就不是居中，所以根本就没有实现居中; 管理员回复：居中是相对于外层容器的，而不是内部元素

wowwe(221.192.*.*) 发表于：2010-04-17 09:29:51: 您好!我这里第二列设置了高度但是只显示一点，插如图片可以显示。但是作为背景就不行。为什么呢？还有如果不用清楚浮动，第二列就跑到第一列斜下方了。为什么呢？谢谢; 管理员回复：得看源代码

xiaoxiao(123.118.*.*) 发表于：2010-04-15 10:09:18: 站长，关键是我在插入完第一个div #layout 之后再插入#left时，应该选择再插入点还是开始标签之后等等，选择哪一个呀，我做了显示不出来，要是把#left和#right的代码都写在我插入的#layout之后有显示不出来，很是郁闷！; 管理员回复：几种都试试吧，我也是一种一种试出来的的

xiaoxiao(123.118.*.*) 发表于：2010-04-15 09:04:15: 这个可不可以不写代码，用新建css样式实现呢，就像做一列表格那样，可以通过建样式实现，不写代码？？; 管理员回复：可以的，自己尝试下吧

chaiqing11(113.89.*.*) 发表于：2010-04-14 00:51:30: 站长，我用的是几乎一样的语言，为什么#1和#2容器不显示呢？边框都没有出来。。。 <style type="text/css">  </style> </head> <body> <div id="box"> <div id="1">此处显示 id "1" 的内容</div> <div id="2">此处显示 id "2" 的内容</div> </div> </body>; 管理员回复：id和class名称必须以英文字母开头

perfect(58.51.*.*) 发表于：2010-04-11 15:28:09: 这个网站真好,感觉学习这个有信心了,呵呵~~~; 管理员回复：欢迎来学习

nnyycc(113.56.*.*) 发表于：2010-04-10 19:54:18: 谢谢老师，之前我打错了。我意思是这个例子里面的那个margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;可以简写为margin:0 auto;吧。不过我也知道了第一个是代表上下，第二个代表左右，Thanks。加油

nnyycc(113.56.*.*) 发表于：2010-04-10 15:38:00: 把margin-top:0; margin-right:auto; margin-bottom:auto; margin-left:0px 简写为margin:0 auto; 也是可以的吧。; 管理员回复：不可以，简写第一个值代表上下，第二个代表左右

chaiqing11(113.89.*.*) 发表于：2010-04-05 20:37:22: 站长您好，我想问一个问题：这里您的容器为什么要设置成404像素？那4像素是因为四个边线的像素=4么？还有就是如果我只确定了容器像素是404，左边宽度是200，右边想自动填充容器剩下的位置，要如何设置？多谢您了。; 管理员回复：请看左侧固定，右侧自适应的教程或实例

violin0889(219.152.*.*) 发表于：2010-03-31 16:16:36: <!--这个代表是什么意思？另外<br/>和<BR>这两种写法哪个是对的。我知道是自闭合，可我不能很透彻明白，请告诉我。谢谢; 管理员回复：那是注释。<br />的写法是正确的

muzifeng55(220.114.*.*) 发表于：2010-03-28 08:29:47: 当右侧div内容太多时，就会掉下来！我想看看站长怎么解决这个问题的！谢谢; 管理员回复：你说的太多指怎么个多法？

leman(125.118.*.*) 发表于：2010-03-23 22:07:59: 对照的看下来基本上能看懂，可是让我自己写就不会了，初学者都是这样的么。。？; 管理员回复：必须多动手，看一节跟着制作一节的内容，这样才能快速掌握

leman(125.118.*.*) 发表于：2010-03-23 22:07:01: 太喜欢这个网站了，初学者学习的好帮手！; 管理员回复：欢迎常来

竹子空的(117.87.*.*) 发表于：2010-02-27 22:17:40: CSS网页布局入门教程8：三列浮动中间列宽度自适应中间的宽度不能随着两边的段度改变而自定。曾加两边方框的宽度或center样式中不用margin（也可以调小）属性，中间的绿边框都没了，只能变成两边边框的颜色。不知提的对不对，请站长指教。; 管理员回复：不太明白

zpc(122.195.*.*) 发表于：2010-02-10 14:45:36: 我试了下，ie8不能表现出想要的效果，我用遨游可以; 管理员回复：我这儿IE8就正常呀

oldbird(121.235.*.*) 发表于：2010-02-10 00:11:35: 在IE8里运行了一下代码，发现左栏与右栏并未在同一行内居中，而成了一上一下排列，试着将它们的margin和padding都设置成了0px，依然如故，如果将layout这个外框的宽度增加一个像素则可以实现所需效果，并且不需要设置margin,padding，没有想明白道理，望能解答。谢谢！; 管理员回复：是不是忽略了边框？因为width的值是不包括边框的

957239918(125.39.*.*) 发表于：2010-02-08 22:39:36: 新建div的选择：在选定的内容旁是包涵在其中，在标签之后是并列的.

财富之门(122.70.*.*) 发表于：2010-02-05 22:23:23: tianshi(222.134.*.*) 发表于：2010-01-19 17:01:30 为什么layout的宽度改为其他数值后，例如900px,就不能居中了！管理员回复：你把layout设置个背景看盾 layout设置600PX，浮动无，只是上面的一条线对吗？去看8去了; 管理员回复：因为它内部的元素全部浮动了

BB(222.166.*.*) 发表于：2010-01-30 22:36:13: 看懂了~~謝謝~~~這教程真的寫得很好丫~~~~支持你丫~~^^; 管理员回复：常来哟

BB(222.166.*.*) 发表于：2010-01-30 22:29:45: 請問一下那一句語法定義了#layout是父層呢?因為將它放在最頂層嗎??謝謝解答~~; 管理员回复：已回答

BB(222.166.*.*) 发表于：2010-01-30 22:29:03: 請問一下那一句語法定義了#layout是父層呢?因為將它放在最頂層嗎??謝謝解答~~; 管理员回复：#layout包含的层是它的子层，那它就是父层了

张小二(117.95.*.*) 发表于：2010-01-25 16:28:14: 为什么出现3个ID啊，我看到另外一个文章说，只能出现一个ID啊; 管理员回复：你理解错了，指一个ID在页面中针对一个元素，不是针对多个，而不是只能有一个ID

tianshi(222.134.*.*) 发表于：2010-01-19 17:01:30: 为什么layout的宽度改为其他数值后，例如900px,就不能居中了！; 管理员回复：你把layout设置个背景看看

ggyy(218.108.*.*) 发表于：2010-01-13 15:51:13: 右边的不应该用float: left;而应该用margin-left:30%;吧; 管理员回复：你试下吧，我觉得不行

CSS学者(114.84.*.*) 发表于：2010-01-11 21:54:57: 看了几篇文章，就知道这个网站很好，很强大，支持管理员。在这里学到了我想要的知识。谢谢，管理员！！; 管理员回复：不客气

wtz_227(61.178.*.*) 发表于：2010-01-06 13:26:00: 请问，里面是不是不能包含表格呢？; 管理员回复：可以包含表格呀

插头(116.252.*.*) 发表于：2010-01-06 11:09:33: #layout { width: 404px; margin: auto; }改成这样会出现bug吗; 管理员回复：不会。你所说的bug指的什么？

梦想(118.250.*.*) 发表于：2010-01-03 23:58:14: 跟着您所提供的我东东我一直在学习。不过能不能在把更有深度的东西拿出来晒晒。像这样的。分步骤的先列出变化的代码。再把代码放到，大环境下真的不错。希望您能把大的案例分步骤的再详细讲讲的真是不错。能满足这个愿望吗？; 管理员回复：现在正筹划网站改版，改完后会出一些教程的

小晕~(221.5.*.*) 发表于：2009-12-03 15:45:41: 请问一下为什么#layout加了背景色之后会居左对齐的?; 管理员回复：那是代码有问题，致使margin没生效，是不是忘记写分号了

老菜(59.41.*.*) 发表于：2009-12-02 11:22:44: 跟着学了几课，比我想象的容易。以前习惯了用表格定位的，现在突然发现自己太落后了，以为学不会了。很感谢这个教程，让我重拾信心。; 管理员回复：欢迎学习，坚持就是胜利

hide(113.65.*.*) 发表于：2009-11-29 23:04:55: #layout不设置宽度的话就不会居中,为什么会这样?一般这样的情况(不设置值)会有默认值吗,是多少??楼主帮忙解决下,感激; 管理员回复：默认100%呀

糊涂而已(58.25.*.*) 发表于：2009-11-26 15:37:22: 呵呵,我看着这个标题的时候,我以为楼主有什么除了嵌套以外更高级的办法呢!; 管理员回复：呵呵

梦翼蝶飞(221.221.*.*) 发表于：2009-11-24 14:34:22: 弄好了，弄好了，站长不用回答我的问题了，我弄明白了！

梦翼蝶飞(221.221.*.*) 发表于：2009-11-24 14:02:36: 怎么嵌套呀，我弄不好，一直不能居中，望站长告解在插入第二，第三个div后怎么选择; 管理员回复：请看本站的css网站布局频道，那上边有实例

85403462@q(121.204.*.*) 发表于：2009-11-20 16:18:58: 看到你的回复。。嘿嘿。。可以把教材打包份给我么。。谢谢。。。mail:85403462@qq.com; 管理员回复：教程没有打包的，都是在网上的

xiyu(218.205.*.*) 发表于：2009-10-27 16:03:36: 为什么没说下怎么嵌套; 管理员回复：本例中嵌套就是一个div里套两个div

Guest(222.44.*.*) 发表于：2009-10-22 16:42:42: 可以进一步简化，如下：#layout { width: 404px; margin: 0 auto;}

你好(123.118.*.*) 发表于：2009-10-15 11:28:20: 我要一直看完你所有的教程之后，我能自己用DIV＋CSS制作一个完整的网站来嘛。; 管理员回复：差不多

初学者(123.52.*.*) 发表于：2009-10-14 16:45:12: 教程征地还不错喽; 管理员回复：谢谢夸奖

Glow(123.174.*.*) 发表于：2009-10-12 21:09:57: 呵呵，是我太粗心了，漏掉了两个结束符号，汗......

Glow(123.174.*.*) 发表于：2009-10-12 10:30:07: 晕，怎么DIV非得新建吗？直接在代码里能加吗？; 管理员回复：可以呀，各有各的方法嘛

尛未尛(222.34.*.*) 发表于：2009-10-05 11:02:03: 真感谢站长，真是救星呀，我会把这个网站多多介绍给我的朋友们的，这里的教程真不错。相信能给站长带来点流量。站长加油哦！网站的内容真不错~！非常感谢站长！; 管理员回复：不客气，常来

破破(218.65.*.*) 发表于：2009-10-03 20:29:33: 怎么我的第二次换行了啊是不是div嵌套有先后顺序啊; 管理员回复：可能是父层宽度容纳不下两个子元素宽度

冰河(116.30.*.*) 发表于：2009-09-29 11:38:28: 将左列设置浮动，右列自动适应也能显示出这样的效果。但这样做和教程里的有什么区别吗; 管理员回复：两种不同的实现方式

carrook(121.28.*.*) 发表于：2009-09-28 13:28:02: 上面文章部分写的margin好像写成了margi,是因为可以这样简写吗?还是排版的错?; 管理员回复：手误，不是简写，已纠正

Guest(219.130.*.*) 发表于：2009-09-16 14:26:33: 非常感谢站长提供这么好的教程，对本人乃是雪中送炭，十分感谢！; 管理员回复：不客气，欢迎学习

new(222.185.*.*) 发表于：2009-08-21 20:21:43: 为什么我的两列会换行?; 管理员回复：估计是宽度问题，一个盒模型的宽度是边距＋边框＋填充＋宽度组成。应该是宽度超出了

瓜子(123.123.*.*) 发表于：2009-08-06 11:34:33: #layout-------中为什么不写宽度，就不能居中; 管理员回复：因为不写宽度是百分百显示，这样就无所谓居中不居中了

大学教授(220.178.*.*) 发表于：2009-07-31 20:28:25: 好站，胜过一般学校教育！; 管理员回复：谢谢肯定

黑衣(119.117.*.*) 发表于：2009-07-15 13:15:48: 谢谢作者给的帮助; 管理员回复：不客气

谢谢(120.4.*.*) 发表于：2009-07-14 14:11:42: 支持admin的辛勤劳动，谢谢了; 管理员回复：不客气

支持(202.110.*.*) 发表于：2009-07-09 00:30:48: 怎么调整两列之间的宽度啊，现在的两列看上去是连在一起的管理员回复：设置右侧的左边距即可，前面的一位兄弟说的我也不明白，能不能把代码写出来啊，多谢了啊！; 管理员回复：在#right样式表中加上width: 190px;margin-left:10px;试试看

角容(123.127.*.*) 发表于：2009-07-02 15:46:33: 这个网站很好啊, 我正在学习制作网页.谢谢站长提供如此好的学习环境; 管理员回复：不客气

初学者(58.244.*.*) 发表于：2009-07-02 13:10:31: 怎么调整两列之间的宽度啊，现在的两列看上去是连在一起的; 管理员回复：设置右侧的左边距即可

逝者如斯夫(119.255.*.*) 发表于：2009-06-04 12:59:46: 楼主的教程很实用，又浅显易懂，希望楼主继续出后续手把手教程; 管理员回复：好的。

sai(61.144.*.*) 发表于：2009-06-01 14:21:55: div id='right'里的 float：right才对吧我按你的写 div id=“left”跟Div id=“ringht”在显示的时候重叠的; 管理员回复：一个用float:right，那么另外一个请用float:left

新手(61.190.*.*) 发表于：2009-05-24 21:29:34: 对于layout部分的margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;可以直接写成margin:0px auto吧不更简洁一点吗; 管理员回复：是的

sky(222.55.*.*) 发表于：2009-05-11 10:35:00: 你好请问怎么在火狐中让#layout包裹住#left和#right两层？可以联系我吗？QQ103853641; 管理员回复：本例不就是这个例子吗？

Admin(121.27.*.*) 发表于：2009-04-21 20:42:49: 很好很强大，正在学习，希望管理员继续，争取做的更好！; 管理员回复：有你们的支持，一定会做的更好

花非花(117.36.*.*) 发表于：2009-02-20 13:05:04: 我可以定义一个div 宽度为80%,然后他里面两个DIV left he right 分别为20%和75%吗?也就是说一个自动适应浏览器的DIV里两个DIV可以再自动适应吗?; 管理员回复：应该可以的，你试一下不就知道了

CMM(124.42.*.*) 发表于：2009-02-13 14:41:47: 好像里面语句不通,失误的地方很多,还望站长发表前校对.; 管理员回复：谢谢您的提醒，1－9节教程已校对一遍了。2009-2-17

Guest(125.121.*.*) 发表于：2009-02-05 21:11:09: 的确不错,在蓝色理想的AD发的不错,所以跟过来了。; 管理员回复：蓝色理想有AD吗？我还不知道呢

776w(58.42.*.*) 发表于：2009-01-17 22:02:34: 讨论小小白的问题：去右DIV的浮动后，在浏览器里面显示没什么区别，同样是左右DIV并列显示的，但是在DW里面显示就有区别了，不知道你们的是不是这样的; 管理员回复：dw的设计视窗内核和IE的不一样，解析是会有所差别的。

补充(125.32.*.*) 发表于：2009-01-13 16:35:55: /div在div id='left' 左列 /div的后边，而不是在 div id='left'>左列右列</div的后边呢？

小a(125.32.*.*) 发表于：2009-01-13 16:01:42: 为什么我做完后把浏览器缩小后第右边的格被挤到下边了。左列在这里右列得手动改左列右列; 管理员回复：在我这儿正常呀，你用的什么浏览器？是不是忘记设置父div的宽度了。

Guest(61.184.*.*) 发表于：2008-12-29 11:58:56: 我的怎么装不到容器里去; 管理员回复：装不到容器？能不能再表述明白些

Guest(222.90.*.*) 发表于：2008-12-05 09:42:19: 我把代码COPY过去了，但显示的结果不同；不知道为什么。。管理员给讲一下，谢谢！！！我在IE和Firefox里面都试了；不行，是不是我的游览嚣设置有问题？？？; 管理员回复：如果你把所有代码都拷贝过去的话应该是一样的。注意你的文件里是否有头部的声明？

小叫花(211.160.*.*) 发表于：2008-11-26 16:35:49: 看到这里说：宽度由各种属性相加而成，我想说个问题，可能地方不对，望见谅。就是css版式布局的第22个例子，外容器总宽度900px，里面包含左右两个小容器。右侧宽200px，左右间隙为5px;右边的容器宽度却变成了675px(有属性padding:10px)，padding是内边距，不是外边距，我就是想不明白怎么就变成了675px，理论上不应该是695px吗？管理员看到的话希望回复一下哦，先谢过了：）; 管理员回复：在IE6以上版本及标准的浏览器中，对box盒模型宽度的解释是内容的宽度＋内边距＋边框＋外边距=总宽度。你可以看下布局频道下面的盒模型示意图，这样能更好的理解div。

小4(117.93.*.*) 发表于：2008-11-25 18:17:00: 讲的很详细容易懂不错我会天天来的; 管理员回复：好啊，欢迎～

小小白(119.120.*.*) 发表于：2008-11-24 14:09:09: right的float 会不会多余; 管理员回复：这个不多余，你可以去掉这个代码再预览看一下

CSS网页布局入门教程7：二列固定宽度居中

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

我要评论

推荐文章

热门文章

最新图片素材

最新评论文章

在线交流QQ群

CSS网页布局入门教程7：二列固定宽度居中

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

我要评论

推荐文章

热门文章

最新图片素材

最新评论文章

在线交流QQ群

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