DIV_CSS layout problem: 3 horizontally aligned DIVs with fixed width on the left and right, and automatic filling of the middle width_html/css

DIV_CSS layout problem: 3 horizontally aligned DIVs with fixed width on the left and right, and automatic filling of the middle width_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:39:39

Original

1130 people have browsed it

As a front-end novice, this was one of the questions in my interview for a front-end position. I had no practical experience, so I hit it by mistake, and ended up getting it wrong!

I rarely have time today to think about it seriously. The answer is not necessarily the best solution, but it can achieve the same effect.

Problem description: Place three horizontally aligned DIVs inside a DIV with an uncertain width. The width of the left and right DIVs is fixed at 200px, and the middle DIV fills the remaining width.

This question was the first question I did at that time. After reading the question, I wrote out the answer: isn’t it just a matter of float:left;! (Practice gives true knowledge, and I was defeated by the facts!)

The code I submitted for the written test:

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style type="text/css">    .mainwrap{      width: 1000px;      margin: 0 auto;      height: 300px;    }    .left{      width: 150px;      height: 100%;      background: yellow;      float: left;    }    .right{      width: 150px;      height: 100%;      background: pink;      float: left;    }    .center{      width: auto;      height: 100%;      background: green;      float: left;    }  </style></head><body>  <div class="mainwrap">      <div class="left"></div>      <div class="center"></div>      <div class="right"></div>  </div></body></html>

Copy after login

The interviewer’s evaluation: This code is a must achieve your target results.

At that time, he did not pursue the transfer issue further. Later, I tried to run the code on the computer and the results are as follows:

center is missing !

It is indeed not the target effect! Suddenly I didn’t know what happened! But I understand the interviewer's evaluation: This code will not achieve your target effect (you are not deep enough in HTML CSS)!

But I am glad that the question is so simple. After seeing this result, I realized that I had fallen into a trap designed by the interviewer without even knowing it!

It has been almost 5 months since the interview. When I encountered similar problems in the project, I could only treat the middle div as a fixed div. I have never seriously looked for a solution to this problem. Always using novice as an excuse, I really missed the opportunity to solve many classic problems. Back to the topic, I thought about it carefully today. This is not necessarily the best solution, but it can achieve the target effect. The code is as follows:

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style type="text/css">    .mainwrap{      width: 1000px;      margin: 0 auto;      height: 300px;    }    .left{      width: 150px;      height: 100%;      background: yellow;      float: left;    }    .right{      width: 150px;      height: 100%;      background: pink;      float: right;      position: relative;      top: -100%;    }    .center{      width: auto;      height: 100%;      background: green;      /*float: left;*/    }  </style></head><body>  <div class="mainwrap">      <div class="left"></div>      <div class="center"></div>      <div class="right"></div>  </div></body></html>

Copy after login

Running effect:

There is a stretching problem with this problem; on the contrary, the middle div is fixed and the remaining width is divided equally between the left and right.

In fact, it can solve the above problem. This problem is very open. There are many ways to achieve it, such as:

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style type="text/css">    .mainwrap{      width: 1000px;      margin: 100px auto;      height: 300px;      border: 1px solid #ff0000;    }    .left{      width: 50%;      height: 100%;      background: yellow;      float: left;    }    .right{      width: 50%;      height: 100%;      background: pink;      float: right;      position: relative;      top: -100%;          }    .center{      width: 600px;      margin: 0 auto;      height: 100%;      background: green;      /*float: left;*/      position: relative;      z-index: 1000;    }  </style></head><body>  <div class="mainwrap">      <div class="left"></div>      <div class="center"></div>      <div class="right"></div>  </div></body></html>

Copy after login

Done!

Who else has a better solution? Please enlighten me!

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.