{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 傲 的问题《Whitespace causing divs to stack in Pure CSS [dupl》','https://www.manongdao.com/q-580801.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
This question already has an answer here:
I'm using Pure CSS to layout a site, and I've run into an issue. If there's any whitespace between nested grid elements, it breaks the layout and pushes the last div onto the next line. I created a test website with as little in it as possible to test if it was just me, and I'm still running into the problem.
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="pure-u-1-3">
<p>Hello world</p>
</div>
<div class="pure-u-1-3">
<p>Hello</p>
</div>
<div class="pure-u-1-3">
<p>Hey there</p>
</div>
</div>
<div class="pure-u-1-2">
<p>Hi :)</p>
</div>
</div>
</body>
</html>
This code results in this: 
If I take the whitespace out from between the divs, as in
<div class="pure-u-1-3"><p>Hello world</p></div><div class="pure-u-1-3"><p>Hello</p></div><div class="pure-u-1-3"><p>Hey there</p></div>
it fixes itself:
This issue is occurring in both Chrome and Firefox. Is this an issue with Pure CSS, or am I doing something horribly wrong?
EDIT: I found a solution specific to YUI Pure CSS. To nest layouts, each set of columns needs to be in its own .pure-g div. I put this in more detail on the Github issue.
Whitespace makes a difference in the rendering of inline elements, but everything beyond a single one is always reduced to one whitespace.
sine css is dividing the with
pure-u-1-3-33.333%for one item and if we put three in a box(pure-u-1-2) its full , so no space for whitespace..So if you put white space the last div goes down because of lack of space.
This previous thread on the subject should be of interest to you. Please follow this link, as this has been extensively tested and discussed HERE.
display: inline-blockwill always keep the whitespace between your elements if there is any. There are several hacks to get rid of the whitespace between the elements. You can find some good ones here. I personally think thefont-size: 0pxhack works best, though it can be a hassle if you're working with EM'sWhat I really would suggest though would be to use
float:leftinstead ofdisplay: inline-block. This way you can avoid having to use any dirty hacks to make it work.This is true for
inline-blockelements. Comment them out: