Могу ли я отображать 30 divs inline внутри одного td?

-1

Я сделал календарь в html и css.Могу ли я отображать 30 divs inline внутри одного td?

У меня есть индивидуальный td для каждого промежутка времени 30 минут.

Но я хочу создать 30 разделов внутри этого td за каждую минуту.

Прямо сейчас его показ, как это:

http://jsfiddle.net/mausami/FHfjL/1/

, но я хочу, чтобы отобразить каждый DIV в одной строке.

, чтобы показать каждый div, который я написал «в каждом div.

дивы, как это:

<div style="display:inline-block; clear:both; width:0.1%;" class="08:00">'</div>

Может кто-нибудь, пожалуйста, помогите мне?

источник

2013-06-05 Mausami

jsfiddle, пример кода, правильно помечено. почему downvotes? – Madbreaks

ya точно .. почему downvotes? – Mausami

Возможно, вы были заблокированы, потому что используете атрибуты, которые были устарели в 1999 году, и использовали таблицу для макета. – Rob

Во-первых, несколько важных улучшений в коде.

Class names cannot start with a number.. Быстрое исправление - добавить некоторую строку к началу их - я использовал «min_».
У вас есть то же самое id несколько раз. Идентификатор должен использоваться только один раз.
Переместите все свои внешние стили - сделайте inline, его сложно обновить.
Ты ничего не float ИНГ так что вам не нужно clear:both;

Вот то же самое у вас есть, но довольно код: http://jsfiddle.net/daCrosby/FHfjL/7/

Теперь, ваш вопрос. «[как мне] отображать каждый div в одной строке?» Я не совсем уверен, хотите ли вы, чтобы каждый div находился в одной строке (всего 30 строк), или каждый div находился в одной строке (всего 1 строка). Так вот оба пути:

Для отображения каждого DIV на своей собственной линии:

.tbDay div{ 
    display:block; 
}

http://jsfiddle.net/daCrosby/FHfjL/8/

Чтобы отобразить все 30 в одну строку:

.tbDay div{ 
    display:inline-block; 
    width:3.333333%; /* 100% divided by 30 divs */ 
    margin-left:-4px; 
}

Обратите внимание на margin-left:-4px;. Это исправление для интервала между элементами встроенного блока as discussed here.

http://jsfiddle.net/daCrosby/FHfjL/9/

источник

2013-06-05 01:43:07 DACrosby

woww the margin-left работала для меня. Спасибо, лот. – Mausami

Почему вы делаете clear:both, если вы хотите отобразить их inline-block? Просто удалите это правило стиля, и оно должно работать так, как вы ожидаете.

источник

2013-06-05 00:36:41 Madbreaks

Я пробовал. но все же это дает тот же результат. – Mausami

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

чем я должен делать с ячейками таблицы? – Mausami

Вы отображая минутную DIV в display:inline-block

Изменить это block или удалить его полностью. Также рассмотрите возможность использования списка вместо div.

EDIT Ответ выше предполагается, «каждый ДИВ в новой строке» означает одну минуту Div = одну новую линию Согласно разъяснений в комментариях ниже, чтобы сделать все дивы внутри тд появляются в одной строке, применяются a white-space:nowrap

eg вставьте следующий код в CSS часть вашей скрипки:

#tblDay td{ 
    white-space:nowrap; 
}

источник

2013-06-05 00:38:01

, если я меняю его на блокировку, чем его отображение каждого div в каждой строке. – Mausami

Действительно? Использовать 'display: block' для отображения их в одной строке? Нет – Madbreaks

он хотел, чтобы каждый div на отдельной строке –

При установке display:inline-block элемент эффективно ведет себя как один символ текста, который вы можете иначе рассматривать как блок.

Помимо всего прочего, это означает, что он будет обертываться на новую линию, если места недостаточно.

Чтобы обойти это, добавьте white-space:nowrap к элементу контейнера. При желании добавьте white-space:normal в div-модули inline-block.

Я хотел бы также предложить определение правил CSS, как:

.tdDay {white-space:nowrap} 
.tbDay>div { 
    display:inline-block; 
    white-space:normal; 
}

источник

2013-06-05 00:41:05

Я пробовал это, но затем изменился дизайн календаря. ширина временного интервала была неправильной. – Mausami

Если вы хотите использовать эти DIV, чтобы показать время, проходя мимо,

можно использовать градиент и% в фоновом режиме или даже лучше <meter></meter> ,
http://www.w3.org/wiki/HTML/Elements/meter
Вы можете легко с js или скрипта на стороне сервера заполнить нужное значение, чтобы обновить календарь.

веселит

источник

2013-06-05 00:48:31

Могу ли я отображать 30 divs inline внутри одного td?

ответ

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