css3 - 自己做的CSS网格系统里面为什么两个div不能同行？

Question

两个width都是50%的p，设置了向左浮动，为什么它会出现换行？如果设置49%就不会了，这是为什么？

Answer 1

box-sizing:border-box

Answer 2

Try changing the border, inner margin, outer margin, etc. of the two p's to 0

Answer 3

Problems with the calculation method of p width
box-sizing can specify the width value to be calculated using content, margins, and borders as boundaries
Calculating the width as a percentage may cause the total actual width to exceed the total width of the parent container. For left-floating p, it is a line break. For example, left-floating has no effect

Answer 4

Is it IE7? If not, are padding and border-width set? If not, is there a box-sizing: border-box with a margin value set? show us the code.

Answer 5

Pay attention to the box model and consider border padding margin

Answer 6

It is generally better to post the code for easier analysis.
If none of the answers above work, you can take a look at this http://www.html-js.com/article/Do-not-obey-the-inlineblock-browser-on-...

Answer 7

Look at the box model. The "CSS Design Guide" makes it very clear.

Answer 8

If the poster uses inline-block, then the browser actually treats the poster's two p's as inline elements, and inline elements have spaces on both sides by default. The poster tries to set font- on its parent element. size:0px; so that the space size on both sides does not take up space. Then follow a -webkit-text-size-adjust:none to solve the problem that the minimum text of the chrome system is 12px