2009-08-30 2 views
0

청사진 CSS 프레임 워크가 나에게 잘 맞는지 알아 내려고하고 있는데 다음과 같은 걸림돌이 발생했습니다. 문제는 두 개의 pre가 각각 span-12 클래스의 div에 싸여 있지만 두 열에 나란히 표시되지 않고 어떤 이유로 다른 하나를 다른 줄로 감싸는 것입니다.청사진 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> 

답변

2

이유 당신의 < 사업부 >의이 포장은 < 사전 > 태그와 아무 상관이있다 : 당신이 어떤 html 파일에 복사하면 문제를 보여주는 다음 코드는 작동합니다.

<div> 각각은 너비가 470px이고 오른쪽 여백이 10px입니다. 이 두 가지의 합계는 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/