CSS-需要在3列布局中一列一路流向底部_Css

CSS-需要在3列布局中一列一路流向底部

css

CSS-需要在3列布局中一列一路流向底部,css,Css,我有一个网站，我正在工作，我应该已经完善了第一布局。但我现在面临的问题是，不能一路走到底。我已经阅读了关于如何在CSS中获得3列布局的教程但是我需要的是一些东西，将是一个简单的修复我现有的网站。。。。我已经创建了大约10个页面，我正在考虑返回到一个表布局（然后像我在这里所做的那样改装整个页面--> 除非有些人有一种更简单、更好的方法这是现有的网站，因为它现在与CSS和列的问题--> 我确实需要一些帮助！我很肯定这个策略对你有用：编辑：好的，我们开始吧回顾Dreamweaver模板和

我有一个网站，我正在工作，我应该已经完善了第一布局。但我现在面临的问题是，不能一路走到底。我已经阅读了关于如何在CSS中获得3列布局的教程但是我需要的是一些东西，将是一个简单的修复我现有的网站。。。。我已经创建了大约10个页面，我正在考虑返回到一个表布局（然后像我在这里所做的那样改装整个页面--> 除非有些人有一种更简单、更好的方法

这是现有的网站，因为它现在与CSS和列的问题-->

我确实需要一些帮助！

我很肯定这个策略对你有用：

编辑：好的，我们开始吧

回顾Dreamweaver模板和拆分内联CSS，我做了如下调整：

1> 在HTML中的侧边栏1和侧边栏2之间移动主要内容。
2> 将侧边栏1的css更改为：

.thrColFixHdr #sidebar1 {
    float: left;
    width: 150px;
    background: #CCCCCC;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.thrColFixHdr #sidebar2 {
    float: left;
    width: 160px;
    background: #EEEEEE;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.thrColFixHdr #mainContent {
    float: left;
    width: 390px;
    background: #DDDDDD;
    padding: 0 10px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

已更改背景以突出显示页面上的效果

3> 将侧边栏2的css更改为：

.thrColFixHdr #sidebar1 {
    float: left;
    width: 150px;
    background: #CCCCCC;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.thrColFixHdr #sidebar2 {
    float: left;
    width: 160px;
    background: #EEEEEE;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.thrColFixHdr #mainContent {
    float: left;
    width: 390px;
    background: #DDDDDD;
    padding: 0 10px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

4> 将mainContent的css更改为：

.thrColFixHdr #sidebar1 {
    float: left;
    width: 150px;
    background: #CCCCCC;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.thrColFixHdr #sidebar2 {
    float: left;
    width: 160px;
    background: #EEEEEE;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.thrColFixHdr #mainContent {
    float: left;
    width: 390px;
    background: #DDDDDD;
    padding: 0 10px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

5> 添加contentContainer的定义：

.thrColFixHdr #contentContainer {
    overflow: hidden;
}

6> 将.footer更改为#footer，将页边距顶部：8px更改为填充顶部：8px，并添加文本对齐：居中并拆分页脚文本

整个代码在Notepad++HTML中运行（当放入堆栈溢出时，一些选项卡格式稍微丢失）：


无标题文件
/**/
/**/
/**/
标题
侧边栏1内容
此div上的背景色将仅在
内容的长度。如果你想要一条分界线
相反，在#main content的左侧放置一个边框
div，如果它总是包含更多内容
不，我是turpis Feugia Feugia，整数turpis arcu，
佩伦特斯凯·埃吉特、卡苏斯·埃吉特、酵母菌、智人
主要内容
Lorem ipsum dolor sit amet，是一位杰出的领导者。
阿利奎姆、卢克图斯·鲁特鲁姆、埃拉特·努拉
发酵直径，在Nonumy quam ante ac quam.Maecenas urna
purus，酵母菌id，molestie in，Comodo porttitor，felis.Nam
温文尔雅的腔调，温文尔雅的唇舌。
Phasellus tristique purus是一种奥古斯调味品。
埃涅亚射手座。埃蒂安·利奥·佩德（Etiam leo pede）、维尼那提斯河（rhoncus Venetatis）、特里斯蒂克河（tristique）
年，在交通工具上，对交通工具进行了评估
不，是悬钩子
H2水平航向
Lorem ipsum dolor sit amet，是一位杰出的领导者。
阿利奎姆、卢克图斯·鲁特鲁姆、埃拉特·努拉
发酵直径，在Nonumy quam ante ac quam.Maecenas urna
purus，酵母菌id，molestie in，Comodo porttitor，felis.Nam
温文尔雅的腔调，温文尔雅的唇舌。
Phasellus tristique purus是一种奥古斯调味品。
埃涅亚射手座。埃蒂安·利奥·佩德（Etiam leo pede）、维尼那提斯河（rhoncus Venetatis）、特里斯蒂克河（tristique）
在，在，odio


















侧边栏2内容
此div上的背景色将仅在
内容的长度。如果你想要一条分界线
相反，在#main content的右侧放置边框
div，如果它总是包含更多内容
不，我是turpis Feugia Feugia，整数turpis arcu，
佩伦特斯凯·埃吉特、卡苏斯·埃吉特、酵母菌、智人


世纪汽车集团公司|
619.281.2300

版权所有2009-2011保留所有权利|电子邮件：

我很确定这一策略对您有效：