Question

我知道如何制作固定的+流体列布局（在线有很多例子）。但是，遗憾的是，我所知道的所有示例都有第一个固定列，然后是HTML代码中的流体列，如下所示：

<div class="my-layout">
    <div class="my-fixed-col">This is fixed column</div>
    <div class="my-fluid-col">This is fluid column</div>
</div>

有人可以为我提供一种方法，如何使用HTML中的流体列创建此布局，然后修复此类布局，如下所示：

<div class="my-layout">
    <div class="my-fluid-col">This is fluid column</div>
    <div class="my-fixed-col">This is fixed column</div>
</div>

顺便说一句，固定栏位于左侧。

这样做的原因：

我的<h1>标签位于流体列中，所以我想让它更接近到页面顶部
出于响应式设计的目的，我愿意喜欢在较小的屏幕上将流体柱放在顶部。

Answer 1

试试这个 - 包含Fluid和fixed plus页眉和页脚。

HTML：

<div class="wrapper">
    <div class="header">
             header
    </div> 
    <div class="wrapleft">    
        <div class="left">
            left
        </div>
    </div>    
        <div class="right">
            right
        </div> 
        <div class="footer">
            footer
        </div>     
</div>

CSS：

body {
   padding: 0px;
   margin: 0px;
}
.wrapper{
   width: 100%;
   margin: 0 auto;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.wrapleft{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}
.left{
   margin-right: 243px;
   background-color: #afeeee;
   height: 200px;
}
.right{
   float: right;
   width: 233px;
   margin-left: -233px;
   background-color: #98fb98;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}

HTML：反过来固定列+流体柱

1 个答案: