Question

我正在使用以下模板：

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

第一列比右边的两列宽。简单地说，我正在尝试重新排序布局，以便更宽的第一列成为第二列，在两个较窄的列之间。我已经花了相当多的时间来使用基于网格的CSS布局，但还没有接近实现这一点。我很感激有关如何实现这一目标的任何指导，是否有更多方法？

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

Answer 1

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

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

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

Answer 2

试试这个：

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;
}

...但如果你现在的中心专栏明显长于侧栏，你就会遇到问题。

Answer 3

您可以更改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;
}

您将如何重新排列此CSS网格布局中的列？

3 个答案: