6 ways to achieve a two-column layout

If the other shore bustling fall, who accompany me to see the sunset fleeting years

Writing in the front

Your mastery of CSS layout determines how fast you can develop pages in Web development. As Web technology continues to evolve, the number of ways to implement various layouts is endless.

Recently, I put together a series of articles in about half a month using shred time. This series summarizes the various layouts in CSS, their implementation methods and common techniques. This article series will give you a new understanding of CSS layout.

The navigation posts of this series can be entered by me, which can quickly jump to the articles you want to know (recommended favorites)

A two-column layout overview

The so-called two-column layout is one column with a fixed width (or possibly a width determined by child elements) and one column with an adaptive layout. The final result is as follows:

Six ways to implement a two-column layout

Before starting today’s article, let’s put today’s main code in the following:

The common CSS styles are:

body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.left {
  height: 400px;
  width: 200px;
  background-color: #f783ac;
  font-size: 70px;
  line-height: 400px;
  text-align: center;
}
.right {
  height: 400px;
  background-color: #c0eb75;
  font-size: 70px;
  line-height: 400px;
}
/* Clear float */
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Copy the code

HTML structure is as follows:

<! -- Solve height collapse -->
<div class="container clearfix">
  <div class="left">Fixed width</div>
  <div class="right">The adaptive</div>
</div>
Copy the code

The float + calc() function performs the fixed width of the left column and the adaptive right column

The steps are as follows:

  1. Float is enabled for the left column
  2. Float is enabled in the right column
  3. The right column width is 100% of the parent minus the width of the left column

The implementation code is as follows:

.left {
  /* Float on the left column */
  float: left;
}
.right {
  /* Float is enabled in the right column */
  float: left;
  /* Width minus the left column width */
  width: calc(100% - 200px);
}
Copy the code

At the heart of this implementation is the calc() function, which can be seen at the end of my article “Different CSS”, which gives you an idea of the various units in CSS in mouse scrolling.

Float + margin-left Specifies the width of the left column and adjusts the right column

The steps are as follows:

  1. Float is enabled for the left column
  2. Margin the left side of the container to the width of the left column container

The implementation code is as follows:

.left {
  /* Float on the left column */
  float: left;
}
.right {
  /* Make the left side of the container 200px */ by margin
  margin-left: 200px;
}
Copy the code

Absolute + margin-left Complete the left column fixed width right column adaptive

The steps are as follows:

  1. Enable locating disengaged document flow
  2. Margin the left side of the container to the width of the left column container

The implementation code is as follows:

.left {
  /* Enable location of detached document stream */
  position: absolute;
}
.right {
  /* Make the left side of the container 200px */ by margin
  margin-left: 200px;
}
Copy the code

It is important to note that the left column of the above solutions must be fixed width to be implemented. In the following solutions, the left column can be supported by children.

Float + overflow completes the left column fixed width right column adaptive

The steps are as follows:

  1. The element on the left begins to float
  2. The right adaptive element sets overflow to create a BFC to complete the adaptation

The implementation code is as follows:

.left {
  /* 1. The left element begins to float */
  float: left;
}
.right {
  /* 2. Set the right adaptive element to overflow to create a BFC to complete the adaptive */
  overflow: hidden;
}
Copy the code

Flex Layout Implementation

Flex properties are used to implement the Flex layout. The example code is as follows:

.container {
  display: flex;
}
.right {
  flex: 1;
  /* flex: 1; Said the flex - turns up: 1; That is, this item takes up all the remaining space */
}
Copy the code

For detailed use of Flex layouts, please refer to the point I enter

Grid Layout implementation

This function is realized through the Grid layout mainly through the template property, the specific code is as follows:

.container {
  display: grid;
  /* Divide it into two rows, one with its own width and one with the remaining width */
  grid-template-columns: auto 1fr;
}
Copy the code

For detailed usage of the Grid layout, please refer to the point I enter

conclusion