CSS에서 행의 셀 수를 제한하는 방법

휴대 기기 용 포럼을 편집하고 있습니다. 그래서 저는 미디어 쿼리를 사용하여 장치 너비에 따라 앞 페이지의 서식을 지정합니다.CSS에서 행의 셀 수를 제한하는 방법

제 문제는 모든 카테고리가 td 요소를 모두 한 행으로 표시하는이 스타일을 가지고 있다는 것입니다.

<tr class="windowbg2"> 
       <td class="icon windowbg"> 
       </td> 
       <td class="info"> 
       </td> 
       <td class="stats windowbg"> 
       </td> 
       <td class="lastpost"> 
       </td> 
      </tr>

필자는 행을 만드는 PHP를 사용하고 싶지 않으며, 지금까지 시도/검색이 내가 원하는 방식으로 작동하지 않았습니다.

아이콘이 td이고 정보 td가 한 행에 표시되고 싶습니다. 통계 및 lastpost tds가 있습니다. CSS 만 사용하면이 행을 어떻게 분리 할 수 있습니까?

출처

2015-01-21 Junior Dev

당신은 적어도 HTML 코드를 수정하지 않고, 테이블이 작업을 수행 할 수 없습니다. 그렇다면 CSS를 사용할 수있을 것입니다. divs를 사용해야 할 것 같습니다. – Devin

HTML

<table> 
    <tr class="windowbg2"> 
    <td class="icon_windowbg"> 
     icon windowbg 
    </td> 
    <td class="info"> 
     info 
    </td> 
    <td class="stats_windowbg"> 
     stats windowbg 
    </td> 
    <td class="lastpost"> 
     lastpost 
    </td> 
    </tr> 
</table>

CSS

table ,td { 
    border: 1px solid #000; 
} 
table { 
    width: 100%; 
} 
td { 
    width: 49%; 
    float: left; 
    display: block; 
}

당신이 그것을 볼 수 있도록 테이블에 테두리가 단지입니다. 그걸 벗어 버릴 수있어.

DEMO는

http://codepen.io/anon/pen/xbdjoW?editors=110

출처

2015-01-21 01:09:43 trs

순수한 CSS이지만 DOM을 조작하기 위해 일부 자바 스크립트를 추가하는 것이 좋습니다. 네가 원한다면 내가 너를 쓸 수있어. – trs

이것은 시작해야 할 필요가 거의 있습니다. 나는 Javascript를 스스로 할 수있다, 나는 단지 CSS로 완전히 일하려고하고 거기서부터 가고있다. –

트위터의 부트 스트랩이나 Thoughtbots "Bourbon neat"와 같은 그리드 프레임 워크를 사용하고 싶을 것입니다. 이를 통해 주 컨테이너에 얼마나 큰 영역을 지정할 수 있습니다. 그러면 각 요소가 해당 컨테이너에서 얼마나 많이 차지할 것인가.

깔끔한 버번 당신은

tr { 
    display:block # you're probably better off using div's though 
    @include outer-container; 
} 

ele { 
    @include span-columns(6); 
}

사용할 수 있습니다 귀하의 요소가

<tr> 
    <td class="ele"></td> 
    <td class="ele"></td> 
</tr>

이 논리를 사용할 수 있다면이 effectivily 12 열 그리드에서 행에 나란히 두 측면을 둘 것 다른 행들을 다음 행의 전체 열 12 개로 스팬합니다.

물론 이것은 모두 최대 너비 이상으로 일반 CSS로 수행 할 수 있습니다. 그리드는 단지 당신을 위해 많은 일을 해냈습니다. 부트 스트랩은 사용하기가 더 쉽습니다. 나는 버본보다 더 손을 놓는 접근 방식을 선호한다.

출처

2015-01-21 01:05:34

CSS에서 행의 셀 수를 제한하는 방법

답변

관련 문제