홈 페이지 격자 스타일링

내가 작업중인 홈 페이지의 스타일을 지정할 때 문제가 발생했습니다. 내가하는 일의 아주 간단한 버전이다. http://cdpn.io/kgLzD
나는 wordpress를 사용하고 div 안에 "post"클래스로 8 개의 게시물을 출력하는 the_loop를 가지고 있습니다. 내가 겪고있는 문제는 div와 스타일을 "게시하는"것을 선택하는 것에 대한 제어권이 없기 때문에 아래 그림과 같이 각 게시물의 스타일을 지정하는 것입니다. 목록을 사용하고 있다면 스타일을 지정할 항목을 선택할 수 있습니다. 아래의 스타일을 달성하기위한 도움말/팁/조언은 크게 감사하겠습니다. 나는 현재 어딘지 홈 페이지 격자 스타일링

Grid styles

enter image description here

이는 당신이 볼 수 있듯이 나는 기본적으로 필요한 것은 경계이다. 어떻게 이것을 달성하는 것에 대해 갈 것입니까?

출처

2013-01-22 Juan Rangel

당신은 n 번째의 형() 셀렉터를 CSS를 사용할 수 있습니다 오른쪽 열에 : (코드 번호는 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 번째 자식 CSS 선택기를 사용하면 도움이 될 것입니다. n 번째의 형 (2N)가에 div를 모두 선택 것이다 사용하여, 당신은 왼쪽에 떠 있기 때문에와 사업부의이 업이 -

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

출처

2013-01-22 02:43:53

홈 페이지 격자 스타일링

답변

관련 문제