Как получить содержимое для переполнения в другой div, если есть место, используя css?

У меня есть основная область содержимого и область содержимого правой колонки. Содержимое в правом столбце обычно короткое. Как сделать содержимое из основной области содержимого переполненным вправо, если там нет контента.Как получить содержимое для переполнения в другой div, если есть место, используя css?

CSS

#left { 
    width: 440px; 
    float: left; 
} 
#right { 
    margin-top: 60px; 
    width: 250px; 
    float: right; 
    padding-left: 20px; 
    border-left: 1px; 
}

источник

2013-03-28 sephiith

не могли бы вы предоставить свой html? –

Когда вы говорите «переполнение», вы имеете в виду как длинный абзац текста, который продолжается в следующем столбце? Или вы имеете в виду большую часть контента, которая увеличивается по ширине, чтобы покрывать обе колонки (что, в техническом плане, является коллапсирующей колонкой)? Они приведут к совершенно другим ответам. –

Logic

Получение содержимого перетекать в другой контейнер, если другой контейнер пуст - это логика. В CSS нет механизма для логики. У вас должен быть хотя бы некоторый JavaScript или некоторая логика на стороне сервера (условное изменение статического HTML, отправленного сервером).

Если другой контейнер пуст, логика в JavaScript (или на стороне сервера) может изменить макет на тот, который позволяет потоку содержимого. Как это произойдет, и если это возможно только с помощью CSS, это отдельный вопрос. Сначала это касается только соответствующей логики.

Содержание потока

Получение содержимого перетекать в другой контейнер будет очень трудно сделать с помощью CSS в одиночку. Вообще говоря, это не то, как контент течет в браузерах. Я думаю, что самое близкое, что вы могли бы разумно получить, будет использовать CSS3 Columns, но они не поддерживаются IE9 или ранее. Что еще более важно, текущий стандарт не поддерживает использование columns of different widths. Так что, похоже, уже исключены столбцы CSS3.

Похоже, что единственным вариантом для потока контента является разбиение содержимого на фигуры соответствующего размера либо с помощью JavaScript, либо на стороне сервера, и размещение частей контента в соответствующих столбцах.

источник

2013-03-28 03:42:43

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

Это трудно определить, есть ли какое-либо содержимое в правой боковой панели - вы не можете сделать это с чистым CSS. Тем не менее, если вы хотите, чтобы центральное содержание перетечь в любом случае, запустит overflow свойства в вашем CSS:

#left { 
    width: 440px; 
    float: left; 
    overflow-x: visible; 
}

И если вы не хотите, чтобы обернуть текст, смотреть в white-space собственности.

источник

2013-03-28 03:40:43

Ничего не изменилось, используя это. Есть идеи? Текст oveflows, но изображения нет. – sephiith

Вы пробовали настроить изображения на 'display: inline' и' max-width: 100%; ширина: 100% '? –

Как получить содержимое для переполнения в другой div, если есть место, используя css?

ответ

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