Создайте таблицу с CSS

Я пытаюсь, без успеха, разработать конкретный простой макет с CSS. Я хотел бы, чтобы добиться чего-то вроде этого:Создайте таблицу с CSS

BookImage  BookImage  BookImage 
BookTitle  BookTitle  BookTitle

До знаю, что это:

<div class="center"> 
<h2>Science</h2> 
    <div class="ThreeColumns"> 
    <div> <img src="ex"><p>Title</p> </div> 
    <div> <img src="ex"><p>Title</p> </div> 
    <div> <img src="ex"><p>Title</p> </div> 
    </div>

.threeColumns{ 
    -moz-column-count: 3; /* Firefox */ 
    -webkit-column-count: 3; /* Safari and Chrome */ 
    column-count: 3; 
    }

Проблема заключается в том, что я не получаю то, что я хочу. Как будто каждый тег (<img> или <p></p>) рассматривается как «столбец». Я хотел бы организовать группу <img> и <p>, собрать их вместе и получить мой макет. Я думал, что <div> может это сделать, но я ошибся.

источник

2013-06-12 Luigi Tiburzi

Вам также понадобится display:table на вашем контейнере div и display:table-cell на вашем дочернем div.

источник

2013-06-12 18:46:47 landons

Если вы ищете такой результат, просто используйте <table> с <tr> s и <td> s. Вы можете создавать фонов, границ и т. Д. С помощью CSS.

источник

2013-06-12 18:48:16 Mooseman

Можете ли вы объяснить, почему в Интернете настолько известен во всем «никогда не использовать таблицы», «они не путь», «использование CSS вместо», который вдохновил мое решение ??? –

Таблицы предназначены для табличных данных. Можно утверждать, что данные, которые вы пытаетесь отобразить, являются табличными. Таблицы НЕ предназначены для прокладки страницы. –

Таблицы следует использовать только для представления табличных данных. Табличные данные - это в основном электронная таблица. (возможно, связанный с этим: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1). – cimmanon

Если вы действительно строите стол, почему бы вам не использовать все теги <table>. Общее эмпирическое правило, которое кто-то сказал мне на этом сайте однажды, состоял в том, что использовать таблицы можно, когда данные на самом деле табличные, но не для макетов. Если вы данные табличный, который кажется, что это так, зачем изобретать колесо.

источник

2013-06-12 18:49:22 War10ck

Давным-давно кодекс обезьян по всему миру использовал таблицы для макетов, поэтому * «дизайн без таблиц» * в конечном итоге стал чем-то. Был общий крик, что вы никогда не будете использовать таблицы для стилизации * (это правильный путь). Но по мере того как человеческое общение идет, многие люди получили * никогда не использовать таблицы * часть сообщения. Я думаю, именно поэтому я вижу, как многие люди пытаются делать таблицы, которые не ...

. – Renan

Это не обязательно означает, что это * таблица. – cimmanon

@Renan Согласен. Меня действительно учили, что '

' s были плохие. Только на этом сайте кто-то должным образом объяснил их мне и сообщите мне, что это не '

' s, которые плохи, а способы их злоупотребления для целей макетов. – War10ck

Ключ, который вы ищете, это собственность break-inside.

.ThreeColumns div { 
    -webkit-column-break-inside: avoid; /* this is the old name */ 
    break-inside: avoid; /* this is the new name */ 
}

Однако Firefox не поддерживает это свойство вообще, хотя он поддерживает большинство других свойств столбцов.

источник

2013-06-12 18:55:36 cimmanon

Это свойство, в его случае, может быть принудительно задано как элемент inline-block, поэтому они остаются в одном столбце. Если вам нравится, это работа или трюк. –

Чтобы избежать разбрызгивания из колонки в другую, установите их как встроенный в коробку/содержимое.

<div class="center"> 
<h2>Science</h2> 
    <div class="ThreeColumns"> 
    <div> <img src="ex"><p>Title</p> </div> 
    <div> <img src="ex"><p>Title</p> </div> 
    <div> <img src="ex"><p>Title</p> </div> 
    </div>

.threeColumns{ 
    -moz-column-count: 3; /* Firefox */ 
    -webkit-column-count: 3; /* Safari and Chrome */ 
    column-count: 3; 
    } 
.threeColumns > div { 
    display:inline-block; 
    }

источник

2013-06-12 19:07:41

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

Создайте таблицу с CSS

ответ

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