This is the 29th day of my participation in Gwen Challenge

Interviewer: Let me ask you about CSS. How well do you know it?

Me: Still ok

Interviewer: Write me a layout for the Holy Grail

Me: Uh, no.

Interviewer: Well, it’s a simple question. You implement a two-column layout with a fixed width on the left and an adaptive width on the right

I:… 💥💥💥💥 💥

Implementation of a two-column layout

General two-column layout refers to the left column width fixed, the right column width adaptive, the specific implementation of the two-column layout

Using floating

How it works: Set the width of the left element to 200px and set it to float to the left. Set the margin-left of the right element to 200px and the width to auto (the default is auto, covering the entire parent element).

.outer {
  height: 100px;
}
.left {
  float: left;
  height: 100px;
  width: 200px;
  background: red;
}
.right {
  margin-left: 200px;
  width: auto;
  height: 100px;
  background: gold;
}
Copy the code
Using the flex

How it works: Set the zoom in and out ratio of the left element to 0 and the base size to 200px. Set the zoom scale of the element on the right to 1, zoom scale to 1, and base size to Auto.

.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: red;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

Copy the code
Use absolute layout

Plan a

Principle: The use of absolute positioning layout, the parent element set relative positioning. Set the left element to absolute position and set the width to 200px. Set the margin-left value of the right element to 200px.

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
}
.right {
  margin-left: 200px;
  height: 100px;
  background: gold;
}
Copy the code

Principle 2: Set parent elements to relative positions by using absolute positions. Set the width of the left element to 200px, the width of the right element to absolute positioning, the left element to 200px, and the rest of the orientation to 0.

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  height: 100px;
  background: red;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}
Copy the code
Table Layout
/* Clear the browser's default margins */
* {
    margin: 0;
    padding: 0;
}
/* Table layout */
.wrap {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    display: table-cell;
    background: skyblue;
    height: 200px;
}
Copy the code