Вложенные divs wrap в нежелательный приоритет

У меня проблема с тем, как ведут себя мои вложенные divs с разрывами строк. Я пробовал искать это, но безрезультатно, так как проблему трудно выразить словами.Вложенные divs wrap в нежелательный приоритет

У меня есть четыре див вложенных, как показано ниже, все с дисплеем встроенного блоком:

-------- --------------------------- 
| menu | | content holder div  | 
| div | | ----------- ----------- | 
|  | | | content | | content | | 
|  | | | div 1 | | div 2 | | 
|  | | |   | |   | | 
-------- | ----------- ----------- | 
     ---------------------------

Теперь ДИВО меню и дивы контента имеют гибкую ширину, depens на загруженные данных. Когда либо содержание DIV становится слишком широк, я хочу следующее произойдет:

-------- ---------------------- 
| menu | | content holder div | 
| div | | -----------  | 
|  | | | content |  | 
|  | | | div 1 |  | 
|  | | |   |  | 
-------- | -----------  | 
     | ------------------ | 
     | | content div 2 | | 
     | |    | | 
     | |    | | 
     | ------------------ | 
     ----------------------

Но вместо этого я получаю следующее:

-------- 
| menu | 
| div | 
|  | 
|  | 
|  | 
-------- 
--------------------------------- 
| content holder div   | 
| ----------- ----------------- | 
| | content | | content div 2 | | 
| | div 1 | |    | | 
| |   | |    | | 
| ----------- ----------------- | 
--------------------------------|

Это очень запутанным, когда меню DIV достаточно высок, чтобы скрыть, что любой контент был загружен вообще. Кроме того, сохранение фиксированной ширины меню будет рассматриваться только как последнее средство. Однако divs могли быть сделаны float вместо встроенных блоков, если это поможет.

Кто-нибудь знает простой способ сохранить макет, как на рис. 2? Я тестировал, что это все еще происходит, когда любой контент div будет соответствовать, как на рис. 2, если другой контент div был невидим.

редактировать:

http://jsfiddle.net/pzHhL/1/

источник

2013-05-20 user2401411

предоставить HTML/CSS часть кода, которую вы сделали в скрипке. – Nitesh

Легко и просто добавить max-width для вас Див «держатель содержания DIV», я мог бы дать вам номер, но, которого не дает jsfiddle.

источник

2013-05-20 13:07:21

Но максимальная ширина будет зависеть от ширины меню div, которое является переменной, поэтому я не могу установить это. – user2401411

Вы избили меня до ответа, потому что я создавал скрипку. Вместо того, чтобы конкурировать с вами, я поддержал ваш ответ и поделился своей скрипкой здесь: http://jsfiddle.net/wjW9s/1/. –

@ user2401411, я думаю, вы вводите в заблуждение 'width' и' max-width'. 'Width' зависит от меню div, но вам нужно установить' max-width' независимо от div меню. –

Переключение их поплавки поможет сохранить макет вы ищете

http://jsfiddle.net/duncan/pXdDy/

давая внутренние дивы содержание

min-width:48%; 
margin:1%; 
float:left;

будет сидеть их рядом друг с другом, пока содержание не получает достаточно широкие, чтобы оттолкнуть их

источник

2013-05-20 13:22:39

В скрипке ширины постоянны, мне нужно, чтобы они были переменными для всех div. – user2401411

Внутренние divs имеют фиксированную «минимальную ширину», но будут расширяться до полной ширины в зависимости от содержимого - http://jsfiddle.net/duncan/pXdDy/1/ –

Вложенные divs wrap в нежелательный приоритет

ответ

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