#css #xhtml #html #internet-explorer-7
#css #xhtml #HTML #internet-explorer-7
Вопрос:
У меня есть фиксированный контейнер, и внутри него находится дополнительный контейнер, в котором находится несколько разделов, основанных на выборе пользователя. Мне нужно, чтобы эти дополнительные разделы были выровнены по горизонтали и обеспечивали горизонтальную прокрутку (но не вертикальную прокрутку).
Например, так:
[x] [x] [x]
По сути, моя настройка выглядит следующим образом:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
</div>
</div>
CSS ломается как таковой:
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
#final {
display: inline-block;
float: left;
}
Эта настройка отлично работает в Firefox, однако она продолжает ломаться в IE7. Все разделы «#final» укладываются вертикально:
[x]
[x]
[x]
Есть предложения, как это исправить?
Комментарии:
1. Из того, что вы предоставили до сих пор, я бы не ожидал, что это будет работать так, как вы хотите в FX. Я думаю, вам нужно создать #final display:встроенный блок;
2. Извините, я забыл некоторую важную информацию изначально. Final отображается как встроенный блок.
3. Забудьте о display:inline-block, вам это не нужно И значение с плавающей точкой.
4. Невозможно заставить браузер прокручивать по горизонтали, используя метод, который вы описали. При каждом добавлении нового div #container его ширина должна была бы автоматически изменяться так, чтобы она была больше суммы .final divs. Javascript — это то, что требуется.
Ответ №1:
Здесь несколько проблем. Для начала:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
<div style="clear:both"></div>
</div>
</div>
После ваших значений с плавающей точкой у вас должен быть DIV, который остается постоянным, сообщая вашему браузеру, чтобы он не перемещал какие-либо последующие элементы (ясно: оба).
И у вас есть несколько «конечных» разделов, поэтому они должны быть в классе CSS, а не в ID.
.final {
float: left;
}
Это должно сработать!
Редактировать: Это, по крайней мере, исправит ваши ошибки HTML / CSS. Но я только что заметил, что вы хотите, чтобы документ прокручивался вправо. Единственный способ сделать это — установить ширину div #container так, чтобы она была больше суммы всех ширин .final divs. В противном случае ваш браузер попытается переместить все «вниз».
Комментарии:
1. Возможно, вы захотите прочитать эту статью. Ясно: оба неаккуратны как семантический элемент, когда они используются только для стиля. Используйте CSS, чтобы применить это как элемент :after, или определите clear: оба на «втором»
2. С этой настройкой у меня теперь есть два столбца элементов, но все следующие элементы по-прежнему расположены под ними.
3. @Mike, я предполагаю, что это потому, что оно достигает ширины окна вашего браузера. Если вы хотите принудительно прокручивать правую часть экрана, вам понадобится некоторый javascript.
4. Я это понимаю. Это то, что я пытаюсь сделать. У меня есть скрипт jQuery, который обрабатывает этот элемент (при условии, что он переполняется по горизонтали) как объект типа слайд-шоу. Скрипт для прокрутки работает нормально, но форматирование в IE7 не работает.
5. Ну, у меня есть приведенный выше код, который отлично работает в IE7, при условии, что он не доходит до края браузера. Должно быть, вы ввели что-то не так.
Ответ №2:
Попробуйте это……
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
</div>
</div>
<style>
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
.final {
float: left;
}
Комментарии:
1. Упс. Я допустил опечатку. Final — это класс, а не идентификатор. Я отредактирую исходное сообщение.
2. попробуйте использовать display: inline для идентификатора «second»
3. Не годится. По-прежнему получается практически тот же эффект. Это несколько сложная настройка, вот полный лист CSS для этих элементов