Как предотвратить упаковку DIV, если у них нет фиксированного размера?

Я полностью разозлился на divs, я скоро закончил с сайта, но простую вещь я понятия не имею, как решить. Basicaly У меня есть меню и div div, содержимое отличается от страницы к странице, , и я не хочу, чтобы они обертывались друг на друга. Я читал десятки сообщений, говорящих точно, чтобы поместить минимальную ширину в обертку, но я не знаю, какова моя минимальная ширина. Некоторые страницы имеют ширину только 600 пикселей, а некоторые - почти 1000 пикселей, ее нужно использовать в качестве шаблона php. Вот код, я буду очень рад, если кто-нибудь может помочь на всех, потому что я полностью разочарован этим ...Как предотвратить упаковку DIV, если у них нет фиксированного размера?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
div {padding:2px} 
div.menu{ 
    background-color:#FAFAA0; 
    float:left; 
    } 
div.content{ 
    background-color:#9DFBA9; 
    float:left; 
    } 
</style> 
</head> 
<body> 
<div class="menu"> 
    menu<br>menu<br>menu<br>menu 
</div> 
<div class="content"> 
    The pages which have different size here. For example: 
    <div style="width:600px">Page one</div> 
    or 
    <div style="width:900px">Page two?</div> 
</div> 

<div style="clear:both"> 
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br> 
So I can't just put a min width like 1024px.<br> 
When they are about to wrap, the scrollbar should appear only then...<br> 
How can I achieve that? 
</div> 

</body> 
</html>

источник

2012-02-22 Anonymous

Какой макет вы пытаетесь выполнить? Плавать все 'div' не нужно. –

Макет очень прост, его просто: – Anonymous

http://imageshack.us/photo/my-images/585/21663387.png/ Я использую 4 divs, header, menu, content и footer, но если контент слишком большой, он попадает под меню. – Anonymous

Это то, что вам нужно? http://jsbin.com/exuvoz

Я заключена в .menu и .content элементы в <div> с float: left и changeddiv.content { float: left; } к div.content { overflow: hidden; }.

источник

2012-02-22 02:17:35 thirtydot

Спасибо, хорошо это вроде ... работает ***, но он получает мой контент, нарезанный ... :(Так что это не то, что я ищу. Дело в том, что я не хочу скрытое переполнение, страница может быть длинным, и он должен быть виден, но если он не подходит, тогда появится полоса прокрутки. – Anonymous

Какой браузер вы используете, что отрубает контент? 'overflow: hidden' не должен делать это здесь, если только нет что-то еще на вашей фактической странице, вызывающей его. В любом случае вы можете заменить 'overflow: hidden' на' margin-left: px', например: http://jsbin.com/exuvoz/2 – thirtydot

Спасибо , ну, я использую IE хром хром, и шоу нарезать ...: http://imageshack.us/photo/my-images/406/getschopped.png/ Я попробую с пометкой прямо сейчас. – Anonymous

-1

ли вы попробуете дисплей: таблица на обертке и дисплей: таблица -cell по меню и контенту?

источник

2012-02-22 02:04:56

Я действительно пытался их попробовать, но это не сработало для меня. Я понятия не имею, как их применять, потому что я никогда раньше их не использовал. Если бы вы могли изменить мой код и прикрепить эти теги, я бы сразу проверил его. Или просто скажите, где их разместить ... Спасибо – Anonymous

Поместите свое меню и содержимое в обертку div с отображением: стиль таблицы и набор отображения: таблица-ячейка по меню и содержимому. Я не могу сделать это за вас прямо сейчас, поскольку у меня есть iphone только со мной :-) –

Спасибо, я попробую сейчас ... – Anonymous

Это работает для меня в Chrome, IE9 и Firefox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
div {padding:2px} 
div.wrapper { display: table; } 
div.menu{ 
    background-color:#FAFAA0; 
    display: table-cell; 
    } 
div.content{ 
    background-color:#9DFBA9; 
    display: table-cell; 
    } 
</style> 
</head> 
<body> 

<div class="wrapper"> 
    <div class="menu"> 
     menu<br>menu<br>menu<br>menu 
    </div> 
    <div class="content"> 
    The pages which have different size here. For example: 
    <div style="width:600px">Page one</div> 
    or 
    <div style="width:900px">Page two?</div> 
    </div> 
</div> 

<div style="clear:both"> 
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br> 
So I can't just put a min width like 1024px.<br> 
When they are about to wrap, the scrollbar should appear only then...<br> 
How can I achieve that? 
</div> 

</body> 
</html>

источник

2012-02-22 02:50:52

Может быть, вы будете смеяться, теперь меню прыгает вниз по какой-то причине ... http://imageshack.us/photo/my-images/641/menujumpsdown.png/ На некоторых других страницах меню остается, но то контент также скапливается: O – Anonymous

Пожалуйста, попробуйте следующее:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
div {padding:2px} 
div.menu{ 
    background-color:#FAFAA0; 
    float:left; 
    } 
div.content{ 
    background-color:#9DFBA9; 
    float:left; 
    } 
</style> 
</head> 
<body> 
<div style="min-width:600px;border:1px solid;"> 
<div class="menu" style="width:10%"> 
    menu<br>menu<br>menu<br>menu 
</div> 
<div class="content" style="width:80%"> 
    The pages which have different size here. For example: 
    <div style="">Page one</div> 
    or 
    <div style="">Page two?</div> 
</div> 

<div style="clear:both"> 
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br> 
So I can't just put a min width like 1024px.<br> 
When they are about to wrap, the scrollbar should appear only then...<br> 
How can I achieve that? 
</div> 
</div> 
</body> 
</html>

Так что же случилось на самом деле я положил ваше меню DIV и содержание DIV в один DIV. Посмотрите внимательно на встроенные стили, которые я разместил. И вместо использования процента использования «px». Надеюсь это поможет.

источник

2012-02-22 03:03:04

Таким образом, процент использования здесь будет соответствовать размеру родительского div или вашей основной оболочки. –

Спасибо, хорошо, я только что попробовал это. На некоторых страницах с ним появляется полоса прокрутки, и я могу немного прокрутить ее, но если я изменил размер немного больше, он затем прыгает вниз под меню, как и раньше. На некоторых других страницах - они просто прыгают под меню, как раньше. – Anonymous

Как предотвратить упаковку DIV, если у них нет фиксированного размера?

ответ

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