Как предотвратить DIV-обертывание, если они не имеют фиксированного размера? - PullRequest
Новая
       5

Как предотвратить DIV-обертывание, если они не имеют фиксированного размера?

0 голосов
/ 22 февраля 2012

Я полностью разозлился из-за div, скоро я закончу с веб-сайтом, но простая вещь, которую я не знаю, как решить.

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

Я прочитал десятки постов, в которых говорилось, что нужно поместить минимальную ширину в оболочку, но я понятия не имею, какой будет моя минимальная ширина. Некоторые страницы имеют ширину всего 600 пикселей, а некоторые - почти 1000 пикселей. Его нужно использовать как шаблон PHP.

Вот код, я буду очень рад, если кто-нибудь вообще сможет помочь, потому что я полностью разочарован этим ... 

<!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>

Ответы [ 4 ]

1 голос
/ 22 февраля 2012

Это то, что вы после?http://jsbin.com/exuvoz

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

1 голос
/ 22 февраля 2012

У меня это работает в 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>
0 голосов
/ 22 февраля 2012

Пожалуйста, попробуйте это: 

<!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 и content div в один div. Пожалуйста, посмотрите внимательно на встроенные стили, которые я поместил. И вместо использования «px» используйте процент. Надеюсь, это поможет.

0 голосов
/ 22 февраля 2012

Вы пробовали отображать: таблица в оболочке и отображать: ячейка таблицы в меню и содержимом?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...