一文归纳㊑ CSS 多列合理布局和三列合理布局的实

日期：2021-01-20 类型：科技新闻 

关键词：快速建站，网站建设系统，免费网页建站，网站免费建设，建站系统

序言

伴随着大前端开发的发展趋势，UI 架构五花八门，要我们前端开发开发设计对 CSS 的工作能力规定越来越没那麼高或是没那麼苛刻，至少关键性是不如 JS 程序编写的。可是，基本的 CSS 仍然必须大家娴熟把握，今日就来小结写出 CSS 合理布局的方法。

多列合理布局

左列定宽，右列响应式

float + margin 合理布局

html 编码

<body>
  <div id="left">左列定宽</div>
  <div id="right">右列响应式</div>
</body>

css 编码：

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  margin-left: 200px; /* 超过或相当于左列的总宽 */
  height: 400px;
  background-color: lightgreen;
}

float + overflow 合理布局

html 编码

<body>
  <div id="left">左列定宽</div>
  <div id="right">右列响应式</div>
</body>

css 编码

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

肯定精准定位合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  position: relative;
}
#left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  height: 400px;
  background-color: lightgreen;
}

table 合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  width: 100%;
  height: 400px;
  display: table;
}
#left,
#right {
  display: table-cell;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

flex 合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  width: 100%;
  height: 400px;
  display: flex;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 网格图合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  width: 100%;
  height: 400px;
  display: grid;
  grid-template-columns: 200px auto;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

左列不确定宽，右列响应式

左列小盒子总宽伴随着內容提升或降低产生转变，右列小盒子响应式

float + overflow 合理布局

html 编码：

<body>
  <div id="left">左列不确定宽</div>
  <div id="right">右列响应式</div>
</body>

css 编码：

#left {
  float: left;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

flex 合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列不确定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  display: flex;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列不确定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

三列合理布局

多列定宽，一列响应式

float + margin 合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">正中间列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  margin-left: 300px; /* 左列的总宽 + 正中间列的总宽 */
  height: 400px;
  background-color: lightgreen;
}

float + overflow 合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">正中间列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

table 合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">正中间列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  display: table;
  width: 100%;
  height: 400px;
}
#left {
  display: table-cell;
  width: 100px;
  background-color: lightblue;
}
#center {
  display: table-cell;
  width: 200px;
  background-color: lightgrey;
}
#right {
  display: table-cell;
  background-color: lightgreen;
}

flex 合理布局

html 编码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">正中间列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码：

#parent {
  display: flex;
  width: 100%;
  height: 400px;
}
#left {
  width: 100px;
  background-color: lightblue;
}
#center {
  width: 200px;
  background-color: lightgrey;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 合理布局

html 编码

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">正中间列定宽</div>
    <div id="right">右列响应式</div>
  </div>
</body>

css 编码

#parent {
  display: grid;
  grid-template-columns: 100px 200px auto;
  width: 100%;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#center {
  background-color: lightgrey;
}
#right {
  background-color: lightgreen;
}

上下定宽，正中间响应式

圣杯合理布局和双飞翼合理布局目地全是期待先载入的是正中间的一部分，随后再刚开始载入 left 和 right 两台分相对性来讲并不是太重要的物品。

圣杯合理布局

圣杯合理布局：以便让正中间的內容不被挡住，将正中间 div（或最表层父 div）设定 padding-left 和 padding-right （值相当于 left 和 right 的总宽），将上下2个 div 用相对性合理布局 position: relative 并各自相互配合 left 和 right 特性，便于上下两栏 div 移动后不挡住正中间 div。

html 编码：

<body>
  <div id="parent">
    <div id="center">正中间列</div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 编码：

#parent {
  height: 400px;
  padding: 0 200px;
  overflow: hidden;
}
#left,
#right {
  float: left;
  width: 200px;
  height: 100%;
  position: relative;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* 使 #left 上来一行 */
  left: -200px;
}
#right {
  right: -200px;
  margin-left: -200px; /* 使 #right 上来一行 */
}
#center {
  float: left;
  width: 100%;
  height: 100%;
  background-color: lightgrey;
}

双飞翼合理布局

双飞翼合理布局，以便正中间 div 內容不被挡住，立即先在间 div 內部建立子 div 用以置放內容，在该子 div 里用 margin-left 和 margin-right 为上下两栏 div 空出部位。

html 编码：

<body>
  <div id="parent">
    <div id="center">
      <div id="center-inside">正中间列</div>
    </div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 编码：

#left,
#right {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* 使 #left 上来一行 */
}
#right {
  margin-left: -200px; /* 使 #right 上来一行 */
}
#center {
  float: left;
  width: 100%;
  height: 400px;
  background-color: lightgrey;
}
#center-inside {
  height: 100%;
  margin: 0 200px;
}

flex 完成

html 编码：

<body>
  <div id="parent">
    <div id="center">正中间列</div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 编码：

#parent {
  display: flex;
}
#left,
#right {
  flex: 0 0 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  order: -1; /* 让 #left 处于左边 */
}
#center {
  flex: 1;
  height: 400px;
  background-color: lightgrey;
}

到此这篇有关一文归纳 CSS 多列合理布局和三列合理布局的实际应用的文章内容就详细介绍到这了,大量有关CSS 多列合理布局和三列合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！ 

上一篇：网页页面设计方案实例教程(7):提升网页页面制做 返回下一篇：没有了