CSS Positioning, хотите сделать ширину содержимого фиксированной при изменении размера окна.

У меня есть div с двумя вложенными div внутри, один (float: left) - это строка меню, а справа (float: right) должен отображаться любой контент, который есть на странице, он прекрасно работает, когда окно максимально, но когда я изменяю его размер, содержимое сворачивается до тех пор, пока на нем больше не останется свободного места, на котором оно будет вынуждено отображаться НИЖЕ левой строки меню, как я могу сделать фиксированную ширину, чтобы пользователь мог прокручивать ее при изменении размера? (Ширина CSS не работает, я чередовал плавающий правильный контент, а не), вот код:

<div style="width:100%">
  <div style="float:left; background:#f5f5f5; border-right:1px solid black; height:170%; width:120px;"></div>   
  <div style="margin-right:2px;margin-top:15px; margin-bottom:5px; width:100%; border:1px solid #f5f5f5"></div> 
</div>    

Мне нужно только, чтобы это работало на Interner Explorer.

4 css
10.12.2008 15:09:34
7 ОТВЕТОВ
РЕШЕНИЕ

Это должно сделать это (контейнер - родительский div, содержащий эти 2 div):

.container {
    width: 1024px;
    display: block;
}
3
10.12.2008 15:17:45

Ну, положив widthили min-widthсобственность это путь.

Теперь, без примера или ссылки на настоящую страницу, немного сложно ответить.

1
10.12.2008 15:12:34

Просто не делайте правильный div плавающим. Меню уже плавает слева от любого другого контента. Просто установите левое поле для правого элемента div, чтобы содержимое этого элемента не было обернуто вокруг плавающего элемента div.

0
10.12.2008 15:13:45

если два div занимают 100% доступной ширины, попробуйте использовать процентную ширину и отобразить: встроенный дополнительный div с фиксированной min-width / width (boo IE) внутри, где это необходимо.

это является довольно трудным без некоторой HTML идти на

0
10.12.2008 15:15:53

Ваш содержащий div должен иметь ширину, достаточную для того, чтобы вместить как внутренние div

Поэтому, если ваши два внутренних делителя имеют размер 300px каждый и при условии, что у вас нет полей / отступов, вы должны установить внешний div в 600px;

0
10.12.2008 15:16:22

Я немного запутался:
фиксированная ширина означает, что ширина узла не изменится. Никогда. Вы говорите, что хотите прокрутить, когда экран становится слишком маленьким для вашего контента, поэтому я думаю, что вы имеете в виду точную противоположность фиксированной ширины.

Если мое предположение верно, вы могли бы, как упоминалось ранее, перейти к процентной ширине. Следите за шириной предлагаемого решения "min-width", потому что оно не очень хорошо поддерживается.

<div id="container" style="width:100%">
    <div id="primaryNav" style="float:left; width:150px; background-color: Orange">someNav</div>
    <div id="content" style="margin-left: 10px; background-color: Red; overflow: auto;">
        loadsOfSuperInterestingContentI'mSuperSerious<br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        Seriously
    </div>
</div>

Это должно быть довольно кросс-браузер

0
10.12.2008 15:30:34

Возможно, вы захотите установить ширину на содержащем div и установить свойство переполнения

#containing_div {
    width: 200px;
    overflow: auto;
}

Также используйте свойство min-width на странице, если это имеет смысл, однако свойство CSS на самом деле не работает с IE6, это обычно то, что я делаю в этой ситуации (поддерживая Firefox, IE7, IE6 и т. Д.)

#container {
    min-width: 1000px;
    _width: 1000px; /* This property is only read by IE6, which gives a fixed width */
}   
3
10.12.2008 15:27:34
как сказал @ boris-callens, следите за свойством min-width, поскольку оно не так широко поддерживается (IE6 определенно не использует его, поэтому я предлагаю использовать _width для адресации IE6).
Bryan Rehbein 10.12.2008 15:49:46