Как сложить три отделения горизонтально в родительском отделении с жидкими пропорциями и положением каждое детское отделение индивидуально?

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

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

Вот моя Скрипка с кодом: http://jsfiddle.net/mkerny45/97mt7/7/

Screenshot of desired result: http://d.pr/i/KUfd (Here you will see three child divs: left, middle, right in a containing div. The left and right divs are all the way to the left/right side respectively and center div is in center of containing div. The margin is is also depicted in the photo. I would like for the entire containing div and child divs to scale down proportionally and have the child divs always stay positioned in their appropriate location.)

Code

<div class="articles">
  
</div>

2
nl ja de

1 ответы

Можно достигнуть этого текста-align:justify использования, чтобы сделать интервалы между отделением равномерно, таким образом, они - поток к краям. Тогда вы добавляете класс промежутка с шириной 100%, чтобы вызвать ширину обертки.

DEMO -> http://jsfiddle.net/spUKQ/2/

HTML

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    
</div>

CSS

#container {
    border: 2px dashed #444;
    height: 125px;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

/* just for demo */
.box1, .box3 {
    background: #ccc
}
.box2 {
    background: #0ff
}
2
добавлено
@reekogi - Как был бы, я добрался о том, чтобы заставлять изображения измерить пропорционально? Я осуществил ваш код и it' s работающий за исключением того, когда изображения врезаются друг в друга, они спадают до другой линии вместо того, чтобы сократиться пропорционально.
добавлено автор Matt, источник
@reekogi - это то, что собственность CSS3 Флексбокс пытается решить даже при том, что поддержка браузера для этого очень ограничена?
добавлено автор Matt, источник
Пожалуйста, свяжитесь с оригинальный ответ, there' s довольно мало дополнительной включенной информации (также в комментарии). Спасибо!
добавлено автор thirtydot, источник
жаль couldn' t находят связь, просто спасли страницу
добавлено автор reekogi, источник
Используйте проценты и добавьте display:block; % width:100; к изображению-> jsfiddle.net/spUKQ/4 Тяните размер окна результата, чтобы видеть его в действии
добавлено автор reekogi, источник
Косвенно да, но it' s хороший для множества отзывчивого использования-> developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxe‌ ​ s
добавлено автор reekogi, источник
Верстка сайтов 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 участник(ов)