純粹的CSS網格不會相互浮動

Question

我正嘗試使用純CSS佈局來構建網站。

Pure CSS

的div的1/2的寬度不彼此相鄰浮動當我嘗試使用最基本的2列布局。我可以看到他們的寬度是50％。

這是預期的行爲，或者我應該明確地浮在div的

我已經提到兩個以下樣式表。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/base-min.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">

<div class="pure-g"> 
     <div class="pure-u-1"> 
      <div class="pure-u-1-2"> 
       Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
       tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
       consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
       molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
       accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
       duis dolore te feugait nulla facilisi. 
      </div> 
      <div class="pure-u-1-2"> 
       Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
       tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
       consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
       molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
       accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
       duis dolore te feugait nulla facilisi. 
      </div> 
     </div> 
    </div> 

Answer 1

從pure.css網站：

純網格唯一的限制是，所有的 「單位」 是一個 「網格」 的孩子。換句話說，如果你有一個帶有純類名稱的元素，它需要在一個純元素或純元類名稱的父元素中。

所以我相信你不應該把你的列嵌套在一個額外的列。如果刪除父列，它們可以正確地浮動：

<div class="pure-g"> 
      <div class="pure-u-1-2"> 
       Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
       tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
       consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
       molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
       accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
       duis dolore te feugait nulla facilisi. 
      </div> 
      <div class="pure-u-1-2"> 
       Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
       tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
       consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
       molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
       accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
       duis dolore te feugait nulla facilisi. 
      </div> 
    </div> 

或者您打算將一列分成兩列？如果是這樣，我認爲最優雅的解決方案（不顯式覆蓋外部文件）將計算您的細分列的期望寬度並相應地設置它們。請澄清。

Answer 2

拆除包裝的div：

<div class="pure-u-1"> 

Answer 3

只是試試這個：

<div class="pure-g"> 
     <div class="pure-u-1"> 
      <div class="pure-u-1-2" style="float:left;"> 
       <p>Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
       tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
       consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
       molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
       accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
        duis dolore te feugait nulla facilisi.</p> 
      </div> 
      <div class="pure-u-1-2"> 
       <p>Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
       tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
       consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
       molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
       accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
        duis dolore te feugait nulla facilisi.</p> 
      </div> 
     </div> 
    </div>