0

ブループリントのcssフレームワークが自分に適しているかどうかを調べようとしていますが、途中で次の問題が発生しました。問題は、それぞれがspan-12クラスのdivでラップされた2つのpreを持っているが、それらが2つの列に並んで表示されておらず、何らかの理由で一方がもう一方を下にラップしていることです。問題を示す次のコードは、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ピクセルです。2つの場合、これは合計960pxであり、含まれている<div>（950px）よりも10px広くなります。

ここでの解決策は、最後の<div>まで「最後の」クラス（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>

このクラスは右マージンを削除し、<div>がコンテナ内に収まるようにします。

ここでこれのデモを見ることができます：http：//demo.raleighbuckner.com/so/1353282/

于 2009-08-30T15:19:57.077 に答える