问blueprint css pre在div中未按预期显示
EN

Stack Overflow用户

提问于 2009-08-30 06:58:58

回答 1查看 908关注 0票数 0

我试图弄清楚blueprint css框架是否适合我，在此过程中我遇到了以下问题。问题是，我有两个pre，每个pre都包装在一个带有span-12类的div中，但它们并没有并排显示在两列中，由于某种原因，一列将另一列包装到底部。下面的代码演示了这个问题，如果你把它复制到某个html文件中，它就会正常工作：

<html>
<head>
    <link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/63795c8bfe31cbbfad726f714bf8d22770adc7ad/blueprint/screen.css" type="text/css" media="screen, projection">
</head>
<body>
    <div class="container">
        <div class="span-24">
            <div class="span-12" style="background:#eee;"><pre>Hello world asdf asdf asdf asd fas df asd fas dfas dfasd f</pre></div>
            <div class="span-12" style="background:#ccc;"><pre>Hello world asdf asdf asdf asd fas df asd fas dfas dfasd f</pre></div>
        </div>
    </div>
</body>
</html>

css

blueprint-css

回答 1

Stack Overflow用户

回答已采纳

发布于 2009-08-30 15:19:57

%s包装的原因与标记无关。

每个s的宽度为470px，右边距为10px。对于两者，这是总共960px，这比你的容器(950px)宽了10px。

这里的解决方案是使用" last“类(由Blueprint CSS框架提供)直到最后

<div class="span-12" style="background:#eee;"><pre>Hello world asdf asdf asdf asd fas df asd fas dfas dfasd f</pre></div>
<div class="span-12 last" style="background:#ccc;"><pre>Hello world asdf asdf asdf asd fas df asd fas dfas dfasd f</pre></div>

这个类删除了右边距，并允许s放入它们的容器中。

你可以在这里看到一个演示：http://demo.raleighbuckner.com/so/1353282/

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1353282

复制

相似问题

问blueprint css pre在div中未按预期显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问blueprint css pre在div中未按预期显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问blueprint css pre在div中未按预期显示
EN