html structure:
<div id="left"></div>
<div id="right"></div>
css Code:
* {
box-sizing: border-box;
}
-sharpleft, -sharpright {
display: inline-block;
vertical-align: top;
}
-sharpleft {
width: calc(100% - 205px);
/* don"t know why additional 5px? */
}
-sharpright {
width: 200px;
}
demo: https://codepen.io/anon/pen/N.
A simple two-column layout that uses calc () to dynamically calculate the width of the left column to reserve space for the right column.
according to my understanding, -sharpright is 200px, and there is nothing else in the middle. The left column width should be calc , but the actual test shows that the right column will be squeezed to the next row, and at least calc (100%-205px) is needed to ensure that the two columns are at the same level. Where is the extra 5px occupied?
in both chrome and IE11 tests