Нижний колонтитул и вертикальные разделители

Просто хочу задать несколько вопросов об этом примере:

enter image description here

What is the best way to do this 3 column layout these days? Of course there were tables and now there are divs etc etc. What the latest greatest way to accomplish this? If it was totally up to me I'd have a container div, containing 3 other ones. Set to width: 33%; and display: inline;

Кроме того, как получить эти вертикальные разделители? Опять же, насколько я знаю, вы используете это в таблице и отображаете только определенные границы, по которым вы получаете эффект вертикального правила.

Но как лучше всего в эти дни получить этот эффект? Наличие html5 и css3 в панели инструментов.

Заранее спасибо!

1
@RainDiao - Ах, человек! Я имел в виду вертикальный, извините, я быстро его поменю.
добавлено автор Tiwaz89, источник
что вы подразумеваете под «горизонтальными разделителями»? видеть только вертикальные.
добавлено автор Rain Diao, источник

6 ответы

Попробуй это

<Сильный> HTML

<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>

<Сильный> CSS

.outer {
    background: #734e91;
    padding: 12px;
}
.wrap {
    margin: 0 auto;
}
.sub {
    padding: 12px;
    width: 32%;
    height: 150px;
    background: #734e91;
    display: table-cell;
    border-right: solid #a175c4 1px;  
}
.sub:last-child {
    border: 0px;
}

ОБНОВЛЕНО DEMO

4
добавлено
БУМ! Ницца, это прекрасно работает! У тебя есть умение.
добавлено автор Tiwaz89, источник
Ах, хорошо, да, это лучше. Спасибо :)
добавлено автор Tiwaz89, источник
@DeanGrobler wait .. Возьмите новый код, который только что обновлен
добавлено автор Sowmya, источник
@kleinfreund Проверить dustinbrewer.com/… и cssnewbie.com/15-surefire-ways-to -break-your-css Это также хорошо известно для оптимизации css
добавлено автор Sowmya, источник
@kleinfreund FYI - точки с запятой требуются только тогда, когда вы продолжаете писать следующее правило css, иначе это не проблема, если вы пропустите последние точки с запятой
добавлено автор Sowmya, источник
@kleinfreund, опуская точки с запятой? где?
добавлено автор Sowmya, источник
@DeanGrobler Welcm. Вы также можете удалить .wrap div. jsfiddle.net/BjbH2/4
добавлено автор Sowmya, источник
Помимо некоторых ошибок CSS (исключая точки с запятой), эти решения не являются действительно пуленепробиваемыми. Элементы .sub будут иметь непредсказуемую ширину (32% ширина + 2x 12px padding + 1px border).
добавлено автор kleinfreund, источник
@Sowmya Я уже добавил их через править. (Они все еще в вашей демонстрации)
добавлено автор kleinfreund, источник
@Sowmya Согласно спецификации CSS3: «Каждое объявление имеет имя свойства, за которым следует двоеточие и значение свойства, и заканчивается точкой с запятой». (источник: dev.w3.org/csswg/css3-syntax/#syntax -description ) И кроме того, это просто хороший стиль кодирования, чтобы использовать их правильно.
добавлено автор kleinfreund, источник
@Sowmya Первая статья с 2007 года - действительно? А второй уже указывает, какие фатальные ошибки могут возникнуть. Это плохая практика кодирования.
добавлено автор kleinfreund, источник

jsFiddle demo: http://jsfiddle.net/yDXLp/3/



<div>

Our Client

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

<button>Read more</button> </div> <div>

Pay Rates

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

<button>Read more</button> </div> <div>

About US

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

<button>Read more</button> </div>
4
добавлено

The css3 way of doing columns is using "column-*" family of properties

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

Лично я использую эти стили на домашнем сайте , и они обеспечивают довольно гибкие (возможно, с некоторыми небольшими недостатками) форматирование макета.

1
добавлено
@ KhurramIshaque: Вопрос касался новейших технологий. Какой IE должен здесь делать? :П
добавлено автор johnfound, источник
потому что содержимое сайта, использующее столбцы css3, не будет отображаться для пользователей IE.
добавлено автор Khurram Ishaque, источник
не поддерживается в IE, как указано в ссылке ..
добавлено автор Khurram Ishaque, источник

Я рекомендую использовать box-sizing: border-box; (альтернативный вариант стандартной модели css-box).

What does box-sizing: border-box; do? If you define the width of a div (e.g. 33%) and add borders and paddings it longer affects the calculated with of your div. It remains 33% of the parent with (33% - (borders + paddings)).

Стандартная модель коробки добавляет их к рассчитанной с 33% (33% + границы + paddings в нашем случае).

Разметка HTML:

<div class="footer">
    <div class="footer-item item1"></div>
    <div class="footer-item item2"></div>
    <div class="footer-item item3"></div>
</div>

<Сильный> CSS

.footer {
    box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}

.footer-item {
    width: 33%;
    float: left;
}

.footer-item + .footer-item {
    border-left: 1px solid black;
}
1
добавлено

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

Если бы я делал что-то вроде изображения, я бы, вероятно, использовал фиксированную ширину, чтобы я мог контролировать ширину линии для текста.

Используя встроенный блок, вы можете создавать столбцы, которые свертываются и помещаются друг на друга на меньшем экране (например, на телефоне)

Попытайтесь сначала определить желаемое поведение.

EDIT: Oops, I misread and confused horizontal with vertical ;-) I think the other answers explains his enough though.

Исправьте меня, если я ошибаюсь, но я думаю, что свойство css3 column для нескольких столбцов для одного и того же текста.

1
добавлено
Спасибо, что вы подробно остановились на ответе. Это правда, что это зависит от того, какую функциональность вы хотите. Кроме того, да, свойство столбца, как вы говорите, используется для создания столбцов одного и того же текста. Так что, вероятно, это не самый лучший вариант в этом случае.
добавлено автор Tiwaz89, источник

Checkout Twitter Bootstrap ( http://twitter.github.com/bootstrap/ ), Gumby Framework (< a href = "http://gumbyframework.com/" rel = "nofollow"> http://gumbyframework.com/ )

Эти рамки могут предоставить вам готовую функциональность для горизонтальной панели. Другие используют границы. Установите все границы, кроме как прозрачного цвета

1
добавлено
Спасибо, хотя я уже знаю об этих рамках. Я хочу знать, как вы получаете эффект с чистым html и css. Спасибо хоть!
добавлено автор Tiwaz89, источник
Эти рамки, как вы должны знать, основаны на чистых html и css. Вы можете легко редактировать свои html и CSS для желаемых эффектов. Также вы опробовали структуру Less Css? Если этого не сделать, он может ответить на ваш запрос: lesscss.org
добавлено автор Sparky, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)