0

我试图弄清楚蓝图 css 框架是否适合我，并且在此过程中遇到了以下问题。问题是我有两个 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>
4

1 回答 1

2

您的 <div> 包装的原因与 <pre> 标记无关。

每个 <div> 的宽度为 470 像素，右边距为 10 像素。对于这两者来说，总共是 960px，比包含的 <div> (950px) 宽 10px。

这里的解决方案是使用“last”类（由 Blueprint CSS 框架提供）到最后一个 <div>：

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

此类删除右边距并允许 <div> 适合其容器。

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

于 2009-08-30T15:19:57.077 回答