div 内的蓝图 css pre 未按预期显示

发布于 2024-08-03 12:43:32 字数 885 浏览 5 评论 0原文

我试图弄清楚 blueprint 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>

原文

I'm trying to figure out whether blueprint css framework is good fit for me, and i encountered the following snag along the way. The problem is that I have two pre each wrapped in a div with span-12 class, but they are not displaying side by side in two columns, one wrap around the other to the bottom for some reason. the following code demonstrating the problem should just work if you copy it into some html file:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

难得心□动 2024-08-10 12:43:32

您的

换行的原因与

 无关。标签。

每个

的宽度为 470 像素，右边距为 10 像素。对于两者来说，总共 960px，比包含的

宽 10px。（950 像素）。

这里的解决方案是对最后一个

使用“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>

该类删除右边距并允许

适合其容器。

您可以在此处查看此演示： http://demo.raleighbuckner.com/so/1353282/

The reason your <div>s are wrapping has nothing to do with the <pre> tag.

Each of the <div>s have a width of 470px and a right margin of 10px. For the two, this is a total of 960px, which is 10px wider than your containing <div> (950px).

The solution here is to use the "last" class (provided by the Blueprint CSS framework) to the last <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>

This class removes the right margin and allows the <div>s to fit within their container.

You can see a demo of this here: http://demo.raleighbuckner.com/so/1353282/

回复收藏 0 原文

~没有更多了~