Q 问:

Now you have a container with two divs, and the HTML and CSS code is shown below.


We need the two divs side by side and the width of the left div to be fixed,
The div width on the right ADAPTS to the remaining container width 。


Please write down all the possibilities you can think of.

@-v-@

<div class="cont">
  <div class="left-item">
  </div>
  <div class="right-item">
  </div>
</div>Copy the code
html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ffffff;
}
.cont {
  width: 80%;
  height: 40%;
  margin: 50px auto 0;
  background-color: #f4f4f4;
}
.left-item{
  width: 10em;
  height: 100%;
  background-color: #0099ff;
}
.right-item{
  height: 100%;
  background-color: #ff6666;
}Copy the code

Answer A:

All inline-block + calc()

.cont {
  font-size: 0;
}
.left-item {
  font-size: 16px;
  display: inline-block;
}
.right-item {
  font-size: 16px;
  display: inline-block;
  width: calc(100% - 10em);
}Copy the code

All float + calc()

.cont {
  zoom: 1;
}
.cont::after {
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
.left-item {
  float: left;
}
.right-item {
  float: right;
  width: calc(100% - 10em);
}Copy the code

The third left float

.cont {
  zoom: 1;
}
.cont::after {
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
.left-item {
  float: left;
}
.right-item {
  width: 100%;
  padding-left: 10em;
  box-sizing: border-box;
}Copy the code

The fourth kind is left absolute

.cont {
  position: relative;
}
.left-item {
  position: absolute;
}
.right-item {
  width: 100%;
  padding-left: 10em;
  box-sizing: border-box;
}Copy the code

Number five: All absolute

.cont {
  position: relative;
}
.left-item {
  position: absolute;
}
.right-item {
  position: absolute;
  left: 10em;
  right: 0;
}Copy the code

The sixth right Flex

.cont {
  display: -webkit-flex;
  display: -ms-flex;
  -webkit-display: flex;
  -ms-display: flex;
  display: flex;
}
.left-item {}
.right-item {
  flex: 1;
}Copy the code

The 7th kind of table

.cont {
  display: table;
}
.left-item {
  display: table-cell;
}
.right-item {
  display: table-cell;
}Copy the code

8 kinds of the grid

.cont {
  display: grid;
  grid-template-columns: 10em auto;
}
.left-item {
}
.right-item {
}Copy the code

In conclusion:

Use Flex/Table/Grid to solve layout problems. For compatibility issues, or when they are not possible, consider float/absolute layouts. If you still can’t figure it out, try using float/absolute plus calc() for layout.

Using float/absolute will do the job, and they don’t present compatibility problems and are a suitable solution.