Левый контент врезается в правый плавающий контент

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

Левый div врезается в правый div

Ли элементы слева:

border: 1px solid #000000;
display: block;
margin-bottom: 8px;
padding: 10px;

Поле дисплея справа:

border: 3px double #000000;
display: inline-block;
float: right;
margin-left: 20px;
padding: 15px;
width: auto;

Спасибо, Райан

ПОСЛЕ ПРЕДЛОЖЕНИЯ РОБЕРТА:

Добавление встроенного блока в элемент li

ОТВЕТ ТИМУ Б

Ширина является динамической на разных страницах, динамической, как и на каждой странице, но она не будет меняться для каждой страницы, за исключением элементов li, которые выходят за пределы поля отображения. Точно так же, как когда вы перемещаете изображения слева, а текст находится справа от изображений, но как только изображения заканчиваются, текст продолжается под изображением до правого края страницы, это то, что я хочу в обратном порядке. . Итак, я хочу, чтобы элемент li шел к левому краю правого поля отображения, но после поля я хочу перейти к краю страницы. Сам текст соответствует этому, но по какой-то причине элемент li не распознает наличие «объекта», чтобы предотвратить его остановку и врезание в окно отображения. Причина, по которой он не распознает его, заключается в правильном плавающем окне отображения, которое нарушает нормальный поток вещей, но я думаю, что должен быть способ либо манипулировать окном отображения, чтобы его можно было распознать, либо манипулировать ли элементы, чтобы они могли распознать поле дисплея.


person NightHawk    schedule 20.09.2010    source источник
comment
Комментарий исчез, но Роберт предложил добавить в элемент li встроенный блок. Это не сработало. Ищу больше входных данных! Спасибо, Райан.   -  person NightHawk    schedule 21.09.2010
comment
Кстати, я знаю, что могу ограничить размер ul/li, но у меня есть разные страницы с полями отображения разного размера, поэтому я действительно ищу гибкое решение, в котором мне не нужно вводить ширину вручную.   -  person NightHawk    schedule 21.09.2010
comment
Удалил, потому что неправильно понял вопрос. Это заставит его соответствовать своему содержанию, но это не то, что вам нужно.   -  person Robert    schedule 21.09.2010
comment
Ок, без проблем! Я оставлю снимок экрана, чтобы все знали, что я пробовал — я попробую что угодно.   -  person NightHawk    schedule 21.09.2010
comment
@ Райан, ааа, я понимаю. Я подумаю и посмотрю, смогу ли я помочь вам найти решение.   -  person Tim B James    schedule 22.09.2010
comment
Есть ли у кого-нибудь еще возможное решение? -Райан   -  person NightHawk    schedule 27.09.2010


Ответы (3)


Если вы используете плавающий элемент, а не другие, вы столкнетесь с этими проблемами. Попробуйте плавать элемент ul, а также указать ширину элементов.

person Tim B James    schedule 20.09.2010
comment
Я, конечно, могу плавать элемент ul, однако причина, по которой я не хочу давать элементам ul/li ширину, заключается в том, что (1) хотя они будут одинаковой ширины на каждой странице, у меня есть несколько страниц, которые потребуют ширина ul/li должна быть разной. Я рассматривал перезапись стиля для каждой страницы, но это оставляет меня с проблемой (2), которая заключается в том, что некоторые поля отображения имеют большую ширину, и в идеале я хочу, чтобы содержимое располагалось на правом краю страницы (поэтому больше контента помещается в одну строку), иначе у меня была бы длинная несбалансированная страница — имеет ли это смысл? - person NightHawk; 21.09.2010
comment
Можно ли установить ширину с помощью jQuery? Скажем, вам нужно было взять ширину окна дисплея, а затем рассчитать ширину элементов ulli? Не идеальное решение, так как тот, у кого отключены скрипты, не увидит правильный макет. - person Tim B James; 21.09.2010
comment
Как насчет проблемы (2): если я установлю ширину, она не будет обтекать поле отображения, когда элемент li окажется под ним? Я полагаю, что я мог бы также получить высоту и произвести там некоторые вычисления, но это кажется логичным для достижения того, что естественно делает текстовое содержимое, просто контейнер каким-то образом не течет соответствующим образом. Я предпочитаю чистое решение CSS, но это может быть невозможно?! - person NightHawk; 21.09.2010
comment
если вы переместите окно дисплея вправо, то оно останется там, где оно есть, а ulli, плавающие влево, с установленной шириной, поэтому они не попадут в окно отображения. Решение на чистом CSS может оказаться невозможным, так как кажется, что ширина на разных страницах почти динамическая. - person Tim B James; 21.09.2010
comment
Смотрите мой ответ вверху, потому что здесь не хватило места :) - person NightHawk; 21.09.2010
comment
Вы можете установить ширину в процентах, это лучшая ширина: 20% для правого поля, и это, безусловно, сработает, если это так. - person Adam Cherti; 22.12.2014

Если бы вы знали максимальную ширину правого столбца, вы могли бы добавить margin-right:00px; либо к элементам списка, либо к самому списку.

person Robert    schedule 21.09.2010
comment
Правая колонка (окно отображения) изменяется по ширине в зависимости от типа контента. - person NightHawk; 21.09.2010

Поскольку текст делает то, что вы хотите, но не содержащий его LI, я думаю, что LI отображается как элемент блочного уровня (http://htmlhelp.com/reference/html40/block.html). Попробуйте установить для него display:inline-block.

person ph33nyx    schedule 23.07.2012
comment
Правда, для него установлено значение display:block, но изменение его на display:inline-block перемещает li вниз под окном отображения, как показано на изображении выше. - person NightHawk; 24.07.2012