Как я могу создать элементы div, которые похожи на таблицу с рамкой

Мне было интересно... как я могу сделать мои элементы div как коробки, но без использования элемента "table" для рисования границ. До сих пор я использовал элемент таблицы, но когда у меня были более длинные предложения, сам ящик расширялся, что перепуталось с моим дизайном:

http://postimg.org/image/qjp8u01ox/

Обычно центральный столбец также расширяется, когда текст пересекает ширину столбца. Я пытался скрыть атрибут overflow, но опять же текст, остальная часть текста обрезается, вместо перехода на новую строку.

Я хотел бы, чтобы это было похоже на боковые меню e107 CMS. Пример:

http://clanwebs.co.uk/images/codww.jpg

Но я предполагаю, что они используют некоторые изображения и пишут текст через это изображение.

Изменить: Мой код: jsfiddle.net/Xz8x4

Источник

3 ответа

Решение

Вы должны поместить все содержимое в div с указанной шириной. Я пишу небольшой пример, чтобы показать вам, как это работает.

CSS:

.body{
    text-align:center;
    width:80%;
}

.left{
    float:left;
    width:20%;
}

.right{
    float:left;
    width:20%;
}

.center{
    float:left;
    width:60%
}

HTML:

<div class="body">
    <div class="left">
    test test test test test test test test test test test 
    </div>
    <div class="center">
    test test test test test test test test test test test 
    </div>
    <div class="right">
    test test test test test test test test test test test 
    </div>
</div>

демо: http://jsfiddle.net/mihutz/ba2eA/1/

Вам нужна максимальная ширина:

#leftmenu td, #centercol td, #rightmenu td {
    color: #FFFFFF;
    text-align:center;
    overflow:hidden;
    max-width:1px;
}

демо: http://jsfiddle.net/mihutz/Xz8x4/2/

Источник

Проблема в том, что вы не устанавливаете width собственность вообще.

Задавать width: 100px и это будет оставаться в своих пределах. В противном случае это auto и браузер будет пытаться удлинить его, пока весь текст не будет обернут или не найдена крайняя правая сторона.

Источник

Проблема в том, что самый правый текст столбца длиннее, чем у него, поэтому вы можете установить word-break: break-all; разбить этот текст на несколько строк, хотя в нем нет пробелов.

Если реальный текст, который идет в этом столбце, хорошо вписывается в него или имеет пробелы, чтобы его можно было разбить на несколько строк, то проблем не было бы.

Этот трехколонный макет называется макетом Святого Грааля. Может быть, это может помочь вам:

Источник
Другие вопросы по тегам