樣式主頁網格

當我試圖設計一個主頁時，遇到了一個問題。這是我正在做的非常簡單的版本。 http://cdpn.io/kgLzD
我正在使用wordpress並在div中輸出帶有「post」類的8個帖子中的the_loop。我遇到的問題是每個帖子的樣式都像下面的圖片一樣，因爲它們是div，並且無法控制選擇哪種「發佈」風格？如果我使用的是列表，那麼我可以選擇要設置的項目。任何幫助/提示/建議，以實現下面的樣式將不勝感激。樣式主頁網格

Grid styles

enter image description here 這是我目前正如你可以看到所有我基本上需要的是邊界。你會如何去實現這一目標？

來源

2013-01-22 Juan Rangel

你可以使用CSS第n-的類型（）選擇 - 因爲你是浮動的左邊，有div的雙放，使用第n-的類型（2N）將在選擇所有的div在右列：（見這裏codepen：http://cdpn.io/Iacvk）

section.home-grid { 
    width:440px; 
} 
.post { 
    border-top:1px solid #777; 
    width: 200px; 
    float:left; 
    padding: 10px; 
} 
.post p { 
    padding:.5em 1em; 
    width:90%; 
    margin:0 auto; 
    text-align:justify; 
} 
.post:nth-of-type(2n) p { 
    border-left:2px dotted #777; 
}

來源

2013-01-22 04:55:32 gscharles

謝謝兩位！這正是我需要的。我聽說過這個選擇器，但從未使用它。感謝您的幫助！ –

絕對！樂意效勞。 – gscharles

不完全確定你在找什麼，但也許在帖子上使用n-child css選擇器將有所幫助。

http://css-tricks.com/how-nth-child-works/

來源

2013-01-22 02:43:53

樣式主頁網格

回答

相關問題