Как ограничить количество ячеек в строке в 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 сжимались на один ряд, и под ним были указаны stats и lastpost tds. Как я могу отделить эту строку до двух, используя только CSS?

источник

2015-01-21 Junior Dev

вы не можете сделать это с помощью таблиц, по крайней мере, без изменения кода HTML. Тогда вы сможете использовать CSS, похоже, что вам нужно использовать divs anyways – 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, но я рекомендую вам добавить Javascript для управления DOM. Я могу написать вам это, если хотите. – trs

Это в значительной степени то, что мне нужно для начала. Я могу сделать Javascript сам, я просто пытаюсь полностью работать с CSS и идти оттуда. –

Вы хотите использовать сетку, такую как загрузочный лоток Twitter или Thoughtbots «Bourbon neat». Они позволяют указать, как большая область будет с основным контейнером. Затем, сколько элементов будет занимать в этом контейнере.

с бурбона аккуратным вы можете использовать

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

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

это будет effectivily в сетке 12 колонки поставить две бок о бок в ряд, если ваши элементы были

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

вы можете использовать эту логику чтобы остальные составляли полные 12 столбцов в следующей строке.

конечно это может быть сделано в обычном css с максимальной шириной и более. сетки просто сделали для вас много работы. bootstrap еще проще в использовании. Я просто предпочитаю дружелюбивый подход.

источник

2015-01-21 01:05:34

Как ограничить количество ячеек в строке в CSS

ответ

Смежные вопросы