Question

我正在尝试创建一个3列布局，其中左右列是固定的，中心是流动的。

我可以使用显示表格和表格单元格执行此操作，或者我可以通过更改HTML列的顺序来执行此操作，但这两者都使我的响应式布局变得复杂 - 低于1024px的列3需要在第2列下方保留第1列原样然后在500px以下，一切都进入一个垂直列。

此外，每个列高度都必须是最高列的高度，因为它们将具有背景。

让我说我有：

＆＃13;

#left {
  width:200px;
  position:absolute;
  top:0;
  left:0;
  background-color:red;
  height:100%;
}

#middle {
  margin-left:200px;
}

#right {
  width:200px;
  position:absolute;
  top:0;
  right:0;
  background-color:blue;
  height:100%;
}

＆＃13;

<div id="content">
  <div id="left">
    LEFT FIXED
  </div>
  <div id="middle">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tellus vel lorem efficitur ornare. Maecenas sit amet commodo velit, at eleifend est. Cras luctus orci vitae erat maximus rutrum. 
  </div>
  <div id="right">
    RIGHT FIXED
  </div>    
</div>

＆＃13;

如何将这个固定的左侧流体中心固定在右侧，没有显示表而不重新排列列？

建议的答案使用显示表或更改源顺序，我不想这样做。

Answer 1

我添加了“margin-right：200px;”在你的中间身份，因为文本隐藏在后面。

然后我创建了两个媒体查询，以帮助处理您的请求。

CSS：

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

    #middle {
        margin-left: 200px;
        margin-right: 200px;
    }

    #right {
        width: 200px;
        position: absolute;
        top: 0;
        right: 0;
        background-color: blue;
        height: 100%;
    }

    @media screen and (max-width:1024px) {
        #right {
            width: 100%;
            margin: 0;
            top: 300px;
            left: 0;
            right: 0;
            height: 100px;
            position: absolute;
        }
        #left,
        #middle {
            height: 300px;
            top: 0;
            position: absolute;
        }
    }

    @media screen and (max-width:500px) {
        #left,
        #right,
        #middle {
            width: 100%;
            margin: 0;
            left: 0;
            right: 0;
            top: 0;
            height: 100px;
            position: relative;
        }
    }

响应式3列CSS，左右固定流体中心

1 个答案: