你将如何重新排列这个CSS网格布局中的列？

http://www.styleshout.com/templates/preview/KeepItSimple11/index.html

第一列是比它遵循右侧的两个宽。简而言之，我尝试对布局进行重新排序，使较宽的第一列成为第二列，在两个较窄的列之间。我花了相当长的时间与基于网格的CSS布局，但还没有接近实现这一点。我很感激有关如何实现这一目标的任何指导，有没有比一个更多的方法？

编辑：感谢您的建议，但请尽可能提供完整的答案。我不确定如何调整答案以完成解决方案。

来源

2010-08-07 Rhubarb

您是否尝试过使用“position：relative”？

#left-row { 
    position:relative; 
    left:100px; 
} 

#right-row { 
    position:relative; 
    left:-100px; 
}

来源

2010-08-07 15:06:32 Molske

+1 - 这是比我更好的计划，但我认为你错过了一些'.'和''＃那些选择字符... – 2010-08-07 15:15:35

是有点快，固定选择。 – Molske 2010-08-07 15:20:05

对不起，如果我有点傻，但一旦我将这添加到CSS中，我在html中更改了什么？我是否分配课程或ID？ – Rhubarb 2010-08-07 16:32:07

试试这个：

div#content-wrapper #main { 
    left:230px; 
    position:absolute; 
    top:0; 
} 
div#footer-wrapper { 
    clear:both; 
} 
div#content-wrapper { 
    left:0; 
    overflow:hidden; 
    position:relative; 
    top:0; 
} 
#left-columns .omega { 
    float:right; 
}

...但如果你现在中心柱是有史以来明显长于边柱，你将有问题。

来源

2010-08-07 15:15:18

你可以改变你的css类的位置。尝试以下操作：

#RightContent{ 
left: auto; 
right: 0; 
width: 150px; 
background-color: navy; 
} 

#LeftContent{ 
position: absolute; 
top: 0; 
left: 0; 
width: 200px; 
height: 100%; 
background-color: navy; 
} 

#MiddleContent{ 
position: fixed; 
top: 0; 
left: 200px; 
right: 150px; 
bottom: 0; 
overflow: auto; 
background: #fff; 
}

来源

2010-08-07 15:20:51

你将如何重新排列这个CSS网格布局中的列？

回答

相关问题