Сделайте прокрутку div в одной строке.

Мне нужно иметь текст в прокручиваемом div с одной строкой, устанавливая внутри обоих div.Сделайте прокрутку div в одной строке.

http://jsfiddle.net/F6pNm/26/

Цель для все, чтобы поместиться на одна линия!

EDIT: Я думаю, я не был достаточно конкретным, мне нужны ссылки и текст, чтобы они поместились на одной линии. Таким образом, прокрутка по вертикали.

EDIT: Это сейчас самое близкое к тому, что мне нужно. Отсутствует только прокрутка. http://jsfiddle.net/BKvzV/4/

источник

2012-05-10 Marleyzs

Хорошо, удачи в этом! –

Я не считаю, что ваш желаемый результат может быть выполнен исключительно с помощью CSS. Являются ли какие-либо сценарии приемлемыми? –

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

Если я читаю вы правильно, вы не то, что ваш текст сломать, но продолжать идти, никогда не оставляя строку # 1, так что вы можете использовать CSS так:

Fiddle Example!

вАШ CSS ОБНОВЛЕНО

#flash { 
    float:left; 
    width: auto; 
    font-size: small; 
    font-style: italic; 
    text-align: center; 
    white-space:nowrap; 
}

Разница заключается в white-space:nowrap;

Для делает, кто не может видеть его:

enter image description here

EDITED лицезреть отредактированный вопрос вопрос!

The new Fiddle!

EDITED созерцать тот факт, что все дивы внутри колонтитула должен быть рядом!

updated Fiddle!

Примите к сведению, что это решение использует Jquery собрать в реальном времени ширину каждого DIV и суммы все вместе, чтобы установить колонтитул DIV. Без этого это невозможно!

отредактирован, чтобы иметь все 3 DIVS бок о бок в пределах ширины обертки

в Скрипки, например, оболочка является телом

The new Fiddle!

источник

2012-05-10 20:28:54 Zuul

Текст по-прежнему отображается в другой строке, и мне нужно, чтобы оно соответствовало той же строке, что и ссылки. – Marleyzs

Просто добавил экран печати, чтобы доказать, что он работает! Проблема в вашем случае может быть где-то еще! – Zuul

@ Zuul, не максимизируйте свой браузер, уменьшите его. Это должно помешать этому по-прежнему выглядеть правильно, нет? –

, насколько я знаю, Там нет способа * иметь 3 див конкурировать за то же пространство (100%), когда они все настроены на width:auto;. Даже если вы используете overflow или in-line, или другие предложенные методы до сих пор, я думаю, что левый ДИВ всегда будет место, которое он нуждается, то в середине, то право ... если вы не используете набор ширины

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

если вы изменили ссылки, чтобы установить размер, например, width:10%, то 4 из этих ссылок оставляет вас с 60%, так что вы можете установить #flash {width:60%; overflow-x:auto;}, чтобы он прокручивать и одну строку

источник

2012-05-10 20:23:07

Проблема заключается в том, что текст и ссылки загружаются динамически, и я не могу знать размер, который будет оставлен для текста. – Marleyzs

. Проверьте мой обновленный ответ. –

Нет, это не сработает. Пространство для ссылок должно оставаться динамическим, так как их содержимое постоянно меняется между страницами. – Marleyzs

#flash { 
    float:left; 
    width: auto; 
    font-size: small; 
    font-style: italic; 
    text-align: center; 
    white-space:nowrap; /* will put text in 1 line */ 
    overflow-x:scroll; /* will add horizontal scroll bar should the length exceed the container */ 
}

источник

2012-05-10 20:28:18 Sammy

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

#flash { 
    float:left; 
    width: auto; 
    font-size: small; 
    font-style: italic; 
    text-align: center; 

    /*These lines do the trick*/ 
    overflow-x: scroll; 
    white-space: nowrap; 
    width: 100%; 
}

http://jsfiddle.net/F6pNm/35/

источник

2012-05-10 20:32:32

, но разве это не было бы в очереди с «левыми» и «правыми» плавающими дивидами? –

Теперь вы только что отредактировали его, чтобы сказать 'width: auto', а затем' width: 100% 'для того же #flash-идентификатора .... –

Такая же проблема, текст должен появляться на той же линии, что и ссылки, поэтому свиток быть вертикальным, а не горизонтальным – Marleyzs

-1

удалить поплавок: левый

#flash { 
    font-size: small; 
    font-style: italic; 
    text-align: center; 
    white-space:nowrap; 
    overflow-x:scroll; 
}

Попробуйте:

http://jsfiddle.net/damsarabi/F6pNm/40/

источник

2012-05-10 20:44:47 Sammy

Нет, линия прерывается после текста и до последних ссылок. – Marleyzs

Использование JQuery, у меня есть средний размер пеленального ДИВ на основе левого и правого Див-х.

JQuery:

$(function() { 
    var midWidth = $(document).width() - ($('#left').width() + $('#right').width()); 
    $('#flash').width(midWidth); 
});

Fiddle Example

Надеется, что это помогает.

EDIT: Добавлен в CSS в DIV:

height: 36px; 
overflow: scroll;

Его ближе к тому, что вы, вероятно, хотите.
Я не уверен, как получить поле, отображающее только одну строку.

Fiddle Update

источник

2012-05-10 21:16:38 Steve

Это как откровение, мне нужно только иметь текст, центрированный между двумя другими div (если он появляется только при прокрутке). И текст должен быть прокручиваемым (с возможностью просмотра только одной строки за раз). – Marleyzs

http://jsfiddle.net/BKvzV/4/ С этим изменяет размер. Все, что мне нужно, это скроллер сейчас – Marleyzs

Сделайте прокрутку div в одной строке.

ответ

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