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

#html #css #box

#HTML #css #поле

Вопрос:

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

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

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

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

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

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

Редактировать: мой код: jsfiddle.net/Xz8x4

Ответ №1:

Вы должны поместить все содержимое в 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 /

1. Я сделал это аналогичным образом, но все еще не работает, вот скрипка: jsfiddle.net/Xz8x4

2. поле исправлено, большое спасибо, но осталась только проблема с текстом, она все еще продолжается за пределами контейнера, как я могу заставить его перейти на новую строку, если она превышает свой предел? (Я удалил атрибут overflow, потому что в противном случае он сокращает текст ..)

Ответ №2:

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

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

Ответ №3:

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

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

Этот макет из 3 столбцов называется макетом Святого Грааля. Возможно, это может вам помочь: