blueprint css pre inside divが期待通りに表示されない

青写真のCSSフレームワークが私に適しているかどうかを判断しようとしていて、途中で次のような不具合が発生しました。問題は、私は2つのプレをそれぞれspan-12クラスのdivにラップしていますが、2つの列に並べて表示していないことです。問題を実証する次のコードだけでは動作しなければならないあなたには、いくつかのhtmlファイルにそれをコピーした場合：blueprint css pre inside divが期待通りに表示されない

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

出典

2009-08-30 FurtiveFelon

あなた<のdiv > sがラッピングされている理由は、<前>タグとは何の関係もありません。

<div>のそれぞれの幅は470ピクセル、右マージンは10ピクセルです。 2つの場合、これは合計960ピクセルです。これは、あなたの含むdiv >（950ピクセル）の10ピクセル幅よりも広いです。

ここソリューションはdiv要素>最後<に（青写真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-30 15:19:57

blueprint css pre inside divが期待通りに表示されない

答えて

関連する問題