gpt4 book ai didi

html - 纯 CSS 中导致 div 堆叠的空格

转载 作者:搜寻专家 更新时间:2023-10-31 08:31:30 25 4
gpt4 key购买 nike

<分区>

我正在使用纯 CSS 来布局网站,但我遇到了一个问题。如果嵌套的网格元素之间有任何空白,它会破坏布局并将最后一个 div 推到下一行。我创建了一个尽可能少的测试网站来测试它是否只有我一个人,但我仍然遇到了问题。

<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>

这段代码的结果是:Incorrect layout

如果我从 div 之间去掉空白,如

<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>

它会自行修复:

Correct layout

此问题在 Chrome 和 Firefox 中都会出现。这是 Pure CSS 的问题,还是我做错了什么?

编辑:我找到了一个特定于 YUI Pure CSS 的解决方案。要嵌套布局,每组列都需要位于其自己的 .pure-g div 中。我在 Github issue 上更详细地说明了这一点.

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com