Как заставить элемент занимать оставшуюся ширину?

[borus]

Здравствуйте.

 

Вот пример разметки, вроде правильно воспроизвёл ситуацию.

 

Скажите, пожалуйста, как заставить телефоны занимать оставшуюся часть ширины контейнера, чтобы при сужении области просмотра телефоны на оставшейся для них ширине занимали место по центру?

[Great Rash]

http://codepen.io/GreatRash/pen/RNRMJX

[borus]

http://codepen.io/GreatRash/pen/RNRMJX

Благодарю. Вы знаете, на реальном примере я плыву, там адаптивный шаблон на Gantry, столько написано... Может вы подскажите как быть здесь, чтобы сохранить адаптивность?

Нужно чтобы Пятигорск и Москва с телефонами ютились так, как вы сделали, в оставшемся после лого пространстве

Edited December 19, 2014 by borus

[Great Rash]

Ну во-первых вы там грид как-то странно используете: .logo-block у вас внутри .rt-grid-12, а всё остальное зачем-то снаружи. Вы уж впихните, для начала, остальное внутрь. И потом, раз у вас там грид используется, то и разбейте шапку на 2 колонки: .rt-grid-8 и .rt-grid-4 например. В правую колонку поместите Пятигорск с Москвой, а в левую лого и прочее.

[borus]

то и разбейте шапку на 2 колонки: .rt-grid-8 и .rt-grid-4 например.

Подправил примерно как вы предложили.

Есть код разметки:

        <div class="header-contacts">            <div class="tel1"><a href="tel:+79661718334">(966)171-83-34</a><br><span>Москва</span></div>            <div class="tel2"><a href="tel:+78793338085">(8793)33-80-85</a><br><span>Пятигорск</span></div>        </div>

И стиль к нему

.header-contacts {	.tel1, .tel2{		display: inline-block;		width:50%;	}} 

Скажите, почему при 50% .tel1 и .tel2 всё-таки не умещаются на одной строке и приходится указывать 49%?

[Great Rash]

Потому что вот.

[borus]

Потому что вот.

Спасибо.

 

Попробовал выровнять по вертикали содержимое .header-contacts с телефонами как Вами было описано здесь при вёрстке дивами. Не срабатывает. Скажите, в чем моя ошибка?

Если применяю вертикальное выравнивание по методу два с display:table-cell, то .header-contacts перестаёт занимать всю оставшуюся после логотипа ширину...

Edited December 19, 2014 by borus

[Great Rash]

Скажите, в чем моя ошибка?

1) У вас position: absolute; там, а тот метод работает только на элементах без позиционирования.

2) Должна быть задана высота у родителя.

 

И вообще вы так и не поняли то, что я вам советовал, и снова всё неправильно сделали. 

[borus]

 

Скажите, в чем моя ошибка?

1) У вас position: absolute; там, а тот метод работает только на элементах без позиционирования.

2) Должна быть задана высота у родителя.

 

И вообще вы так и не поняли то, что я вам советовал, и снова всё неправильно сделали. 

 

Доброго утра. Благодарю.

 

Я пробовал сделать как вы советовали, то есть раскидать шапку в .rt-grid-8 и .rt-grid-4, если вы про это. Это приводило к пропорциональному сужению столбцов при масштабировании области просмотра. А нужно, чтобы столбец с картинкой лого оставался до определенных пределов с постоянной шириной. Поэтому я отказался от использования классов .rt-grid-8 и .rt-grid-4 перешёл к разметке, в которой правый столбец подстраивается под оставшуюся ширину, будучи блочным элементом.

 

Возвращаясь к последнему вашему ответу:

1.Если вы про элемент .logo-transcription с position:absolute - я его убрал. 

2. На счёт высоты родителя:  у родителя с классом .header-contacts стоит height: 100%; что по местному учебнику должно задавать высоту размером с высоту родительского элемента div с набором классов rt-grid-12 rt-alpha rt-omega. Почему же не растягивается .header-contacts по вертикали?

Edited December 20, 2014 by borus

[Great Rash]

 

Вот у этого элемента надо убирать position: absolute. У него должна быть задана высота, его чилды должны быть инлайн-блоками, далее по моей схеме.

[borus]

 

Вот у этого элемента надо убирать position: absolute. У него должна быть задана высота, его чилды должны быть инлайн-блоками, далее по моей схеме.

Не понимаю, откуда это у вас. Вот что показывает Хром:

[Great Rash]

Вкладку переключите на Styles

[borus]

Вкладку переключите на Styles

вот:

 

нет такого 

[Great Rash]

Мы точно смотрим на один и тот же сайт?

 

[borus]

хм... мы определённо смотрим на один и тот же сайт, только как будто у вас старая разметка, а у меня новая... Похоже у вас старая версия хранится. Может кэш вы как-то можете почистить? Или это мною в настройках используемого шаблона от RocketTheme должно делаться?

Edited December 20, 2014 by borus

[Great Rash]

При открытых средствах разработчика кеш чистится автоматически. Вы не залили на сервер новую версию видимо.

[borus]

При открытых средствах разработчика кеш чистится автоматически. Вы не залили на сервер новую версию видимо.

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

[Great Rash]

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

[borus]

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

Задал. Пока не сильно приблизился к требуемому варианту. Есть ещё два вопроса, простите, что так много

1. Как сделать .header-contacts занимающим всё оставшееся после .our_logo пространство?

2. Почему .tel1 и .tel2 располагаются один под одним вместо 1 строчки? У них ведь display: inline-block;

[Great Rash]

1. Как сделать .header-contacts занимающим всё оставшееся после .our_logo пространство?

Самый первый мой ответ.

 

2. Почему .tel1 и .tel2 располагаются один под одним вместо 1 строчки? У них ведь display: inline-block;

Потому что у них ширина 50% от родителя, а родитель у них шириной с колонку. 

[borus]

Дорогой @Great Rash, доброе утро.

 

Оказывается не хватало единственного стиля overflow:hidden; чтобы правый блок подстраивался под оставшуюся ширину. Почему оно так радикально повлияло на этот момент, ведь по букварю оно просто управляет тем, будет ли содержимое блока выходить за его пределы или нет, а не управляет его шириной?

В инструментах разработчика Хром .header-contacts отображался на всю ширину его родителя, поэтому я удивлялся почему телефоны не были в одну строку... А как же вы поняли, что этот многострадальный .header-contacts был шириной с колонку? У вас наверно более совершенные инструменты разработчика?

Edited December 22, 2014 by borus

[Great Rash]

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

В специфкации W3C об этом написано:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

А как же вы поняли, что этот многострадальный .header-contacts был шириной с колонку?

Если навести мышку на DOM-элемент в инспекторе, то девтулзы подсветят элемент и напишут его размеры.

[borus]

borus, on 22 Dec 2014 - 10:01 AM, said: А как же вы поняли, что этот многострадальный .header-contacts был шириной с колонку? Если навести мышку на DOM-элемент в инспекторе, то девтулзы подсветят элемент и напишут его размеры.

 

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