css两列等宽布局

最新推荐文章于 2024-06-11 12:15:54 发布

哎呦喂1111

最新推荐文章于 2024-06-11 12:15:54 发布

阅读量1k

点赞数 1

分类专栏： web前端文章标签： css两列等宽布局

本文链接：https://blog.csdn.net/qq_31965515/article/details/86000756

版权

本文详细介绍了使用CSS实现两列等宽布局的多种方法，包括背景渐变、绝对定位、display: table-cell、浮动布局、Inline-Block、Flexbox和Grid布局。针对不同需求，如固定布局、自适应布局、等高布局，提供了实例代码和效果图，全面覆盖各种常见场景。同时，文章特别提到了各种方法在浏览器兼容性上的表现。

摘要由CSDN通过智能技术生成

1.使用背景渐变---Background Gradient

HTML

<section class="container"></div>

CSS

/* Pen-specific styles */
html, body { 
  color: #fff;
  height: 100%;
}

/* Pattern styles */
.container {
  background: linear-gradient(
    to right, 
    #ff9e2c 0%, 
    #ff9e2c 50%, 
    #b6701e 50%, 
    #b6701e 100%
  );
  height: 100%;
  width: 100%;
}

2。绝对定位-----Absolute Positioning

HTML

<section class="container">
  <div class="left-half">
    <article>
      <h1>Left Half</h1>
      <p>Weekends don't count unless you spend them doing something completely pointless.</p>
    </article>
  </div>
  <div class="right-half">
    <article>
      <h1>Right Half</h1>
      <p>If your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
    </article>
  </div>
</section>

CSS

/* Pen-specific styles */
* {
  box-sizing: border-box;
}
body {
  font-size: 1.25rem;
  font-family: sans-serif;
  line-height: 150%;
  text-shadow: 0 2px 2px #b6701e;
}

section {
  color: #fff;
  text-align: center;
}

div {
  height: 100%;
}

article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 20px;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

/* Pattern styles */
.container {
  display: table;
  width: 100%;
}

.left-half {
  background-color: #ff9e2c;
  position: absolute;
  left: 0px;
  width: 50%;
}

.right-half {
  background-color: #b6701e;
  position: absolute;
  right: 0px;
  width: 50%;
}

3,display: table-cell布局

// Pen-specific styles
html, body, section, div {
  height: 100%;
}

body { 
  color: #fff;
  font-family: sans-serif;
  font-size: 1.25rem;
  line-height: 150%;
  text-align: center;
  text-shadow: 0 2px 2px #b6701e;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

// Pattern styles
.container {
  display: table;
  height: 100%;
  width: 100%;
}

div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 50%;
  padding: 1rem;
}

.left-half {
  background: #ff9e2c;
}

.right-half {
  background: #b6701e;
}

4.Floats 浮动布局

/* Pen-specific styles */
* {
  box-sizing: border-box;
}
html, body, section, div {
  height: 100%;
}

body { 
  color: #fff;
  font-family: sans-serif;
  font-size: 1.25rem;
  line-height: 150%;
  text-align: center;
  text-shadow: 0 2px 2px #b6701e;
}

section {
  width: 100%;
}

article {
  position: relative;
  top: 50%;
  left: 50%;
  padding: 1rem;
  text-align: center;
  transform: translate(-50%, -50%);
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

/* Pattern styles */
.left-half {
  background-color: #ff9e2c;
  float: left;
  width: 50%;
}
.right-half {
  background-color: #b6701e;
  float: left;
  width: 50%;
}

5. Inline-Block 行内块元素布局

/* Pen-specific styles */
* {
  box-sizing: border-box;
}

html, body, div {
  height: 100%;
}

body { 
  color: #fff;
  font-family: sans-serif;
  font-size: 1.25rem;
  line-height: 150%;
  text-shadow: 0 2px 2px #b6701e;
}

article {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

/* Pattern styles */
div {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 1rem;
}

.left-half {
  background: #ff9e2c;
}

.right-half {
  background: #b6701e;
}

6.Flexbox --弹性盒子布局

/* Pen-specific styles */
html, body, section {
  height: 100%;
}

body {
  color: #fff;
  font-family: sans-serif;
  font-size: 1.25rem;
  line-height: 150%;
  text-align: center;
  text-shadow: 0 2px 2px #b6701e;
}

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

/* Pattern styles */
.container {
  display: flex;
}

.left-half {
  background-color: #ff9e2c;
  flex: 1;
  padding: 1rem;
}

.right-half {
  background-color: #b6701e;
  flex: 1;
  padding: 1rem;
}

7.CSS Grid Layout --CSS grid 布局

display: grid;

/* Pen-specific styles */
html, body, section, div {
  height: 100vh;
}

body {
  color: #fff;
  font-family: sans-serif;
  font-size: 1.25rem;
  line-height: 150%;
  text-shadow: 0 2px 2px #b6701e;
}

article {
  position: relative;
  top: 50%;
  text-align: center;
  transform: translate(0, -50%);
  padding: 1rem;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

/* Pattern styles */
.container {
  display: grid;
}

.left-half {
  background: #ff9e2c;
  grid-column: 1;
}

.right-half {
  background: #b6701e;
  grid-column: 2;
}

两列布局的实现方式有很多，现根据不同需求列出常用的几种

一、两列固定布局

1、普通的浮动布局

两列固定布局，已知左列和右列内容的宽度，可以用float来实现

html: