Ликвидация пробела под дивизией плыла вправо

Question

Ликвидация пробела под дивизией плыла вправо

0

Я пытаюсь устранить пустое пространство ниже деления, которое я плаваю вправо.

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

У меня это плавающее право - это было просто сделать, просто код float: right; используя CSS. Проблема в том, что если я не укажу высоту для деления, я получаю дополнительное свободное пространство ниже деления. Если я задаю высоту так, чтобы под разделом не было пробела, кнопка будет находиться ниже границы раздела.

Перейдите на страницу http://www.bobnovell.com/sideboxproblem.html для страницы с примерами.

боб

BobN 16 фев. 2014, в 01:00

Источник

0

установка высоты: 100% на плавающем делении не приводит к изменению результатов.
BobN 15 фев. 2014, в 23:51
0

Я не вижу, как проблема на странице, на которую вы ссылаетесь, относится к этой проблеме. Какие изменения в коде на странице примера будут сделаны, чтобы принять во внимание этот вопрос.
BobN 15 фев. 2014, в 23:55
0

Приведенные выше комментарии являются ответом на ответ, размещенный Заком Саусье, извините за путаницу.
BobN 15 фев. 2014, в 23:57
0

Похоже, Зак удалил свой ответ - я не знал, что ты можешь это сделать.
BobN 16 фев. 2014, в 00:10
0

TLindig предложил (в чате) использовать отрицательное нижнее поле, и это работает. Я установил его на -4px и лишний пробел удаляется. Я также установил левое поле равным 4px, а отступ слева - 4px, чтобы лучше отформатировать все.
BobN 16 фев. 2014, в 01:18

Показать ещё 3 комментария

Теги:

html

css

css-float

removing-whitespace

1 ответ

Ещё вопросы

установка высоты: 100% на плавающем делении не приводит к изменению результатов.
Я не вижу, как проблема на странице, на которую вы ссылаетесь, относится к этой проблеме. Какие изменения в коде на странице примера будут сделаны, чтобы принять во внимание этот вопрос.
Приведенные выше комментарии являются ответом на ответ, размещенный Заком Саусье, извините за путаницу.
Похоже, Зак удалил свой ответ - я не знал, что ты можешь это сделать.
TLindig предложил (в чате) использовать отрицательное нижнее поле, и это работает. Я установил его на -4px и лишний пробел удаляется. Я также установил левое поле равным 4px, а отступ слева - 4px, чтобы лучше отформатировать все.

TLindig · Accepted Answer · 2014-02-15T22-17-00.000Z

Вы получили пробел, потому что div с плавающим правом больше высоты, чем одна строка текста. Так что это занимает две строки.

Если div должен оставаться на своей линии, оберните текст в новый div и установите clear=both на нем.

Вот пример: http://jsbin.com/hujax/1/

Обновление следует за комментариями в комментариях:

Если вы не хотите менять разметку, вы можете использовать position:ablsolute на своем div и position:ablsolute ее top:1em (или что вы хотите) и right:0. Также контейнеру текста и заголовка нужен стиль: position:relative.

вот и пример: http://jsbin.com/hujax/4/

Обновить

с отрицательным margin-bottom вы можете уменьшить необходимую высоту своего div.

http://jsbin.com/hujax/3/

Плавающий div не отображает две строки в div. Проблема заключается в дополнительном пространстве под div. Посмотрите на оба примера. Плавающий div точно такой же ожидаемый для одного имеет высоту: 18px, а другой не указан высоты. Ваш пример потребует, чтобы я кодировал деление до и после каждого поля. Цель состоит в том, чтобы просто вставить плавающее деление в любой точке страницы без необходимости что-либо менять уже на странице.
Хорошо, я говорю это другим словом. div больше, чем одна строка текста. поэтому он не помещается в одну строку. поэтому текст не плавать под div.
Чем вы могли бы использовать: position: absolute. Вот пример: jsbin.com/hujax/2
Почему вы говорите, что разделение выше, чем одна строка текста - вы говорите это, потому что разделение имеет границы? Снятие границ со второго примера не вызывает изменений, и если я уменьшу кнопку до высоты текста, у нее все еще остается дополнительный пробел под делением.
Не могли бы вы изменить свой пример, используя абсолютную позицию, чтобы под разделением была строка текста? В настоящее время он отформатирован так, что под ним нет строки текста, чтобы увидеть, работает ли ваше предложение в соответствии с предполагаемым методом.
Эффект изменений легче увидеть, если ограничить ширину текста, поместив деление с низкой шириной, как я делал в моих примерах.
давайте продолжим это обсуждение в чате