6 methods of fixed width on the left and adaptive on the right

This is an interview question, how many ways do you have?

Here we assume that the left is named left, the width is 200 px, and the right is named right. i.e. default

 .left {
  width: 200px;
}

My understanding is divided into four categories

• flex layout

  • Need to set the height of the parent element

• grid layout

  • Need to set the height of the parent element

• absolute positioning

  • Gemini element absolute

    • No need to set parent element height
    • The child elements are all set to height, the right child element left：200px + width: 100%

  • Left element absolute + right element margin-left

    • No need to set parent element height
    • The child elements are all set to height, the right child element margin-left: 200px + width: 100%

• float float

  • Left element floats left, right element does not move

    • No parent element required
    • The left element needs to set the width and height and float, and the right element can set the height.

  • Left element floats left, right element floats right

    • No parent element required
    • The left element sets the width, height and left float, and the right element sets the right float and height and width ( width: calc(100% - 200px) )

flex layout

You need a parent element for flex layout, and you need to give it a height (to stretch the container)

 .father {
  display: flex;
  height: 200px;
}
.right {
  flex: 1;
}

grid layout

In the advanced layout method, the child elements do not need to set the width, just set the properties of the parent element.

 .grid {
  display: grid;
  grid-template-columns: 200px 100%;
  height: 200px;
}

Gemini element + absolute

You need to set the width and height for the child element, otherwise it won't hold up. Right element set left: 200px

 .father {
  position: relative;
  height: 200px;
}
.left {
  position: absolute;
  height: 200px;
}
.right {
  position: absolute;
  left: 200px;
  height: 200px;
  width: 100%;
}

Left element absolute + right element margin-left

 .father {
  position: relative;
  height: 200px;
}
.left {
  position: absolute;
  width: 200px;
  height: 200px;
}
.right {
  width: 100%;
  height: 200px;
  margin-left: 200px;
}

No parent element + left element floats left, right element does not move

Both the first two require a parent element, but floats do not

Floating to the left, the next element has an exclusive position, and it is side by side

Similarly, the height needs to be set so that the child elements can be stretched

 .left {
  float: left;
  height: 200px;
}
.right {
  height: 200px;
}

No parent element + left floating on the left, floating on the right

Floating does not require a parent element, and floating is different from normal document flow

My understanding is that the normal document flow is two-dimensional, and floating is equivalent to three-dimensional, which is different from the Z axis

The element on the right is not floating enough, and the width needs to be set

 .left {
  float: left;
  height: 200px;
}

.right {
  float: right;
  height: 200px;
  width: calc(100% - 200px);
}

As long as float implements this function, it does not need parent elements, and itself needs to set height

Summarize

In short, the best way to implement layout is flex, which is simple and compatible with modern browsers and models. Of course, it's because I haven't learned grid yet (but remember that grid has more parameters). Absolute positioning and floating have their pros and cons

major methods	Advantages and disadvantages	what do you need
flex	Simple layout	Requires parent element, height. Child flex:1
grid	Simplest layout but more modern compatibility	Just set the properties of the parent element
absolute positioning	higher compatibility	Requires relative positioning and height of the parent element
float	higher compatibility	No parent element is required, all children need width and height

float is different from the other three, it does not need the parent element as a container

Grid is different from the other three, it does not need to set the width of the child element (left element)

Absolute positioning is different from the other three. Its method requires not only the height of the parent element, but also the height of its child elements.

flex is the easiest

Attach the online demo

This article participated in the SegmentFault Sifu essay "How to "anti-kill" the interviewer?" , you are welcome to join.