Как лучше всего перенести основанное на фреймах приложение «HTML из прошлых лет» на современный CSS (3)?

0

У меня есть старый webapp, основанный на HTML, который я модернизирую, и я хотел посмотреть, было ли что-то лучше, чем мое использование CSS в CSS, чтобы найти эквивалент для фреймов.

Чтобы немного упростить, есть три примерно равных кадра бок о бок. Все три из них прокручиваются вертикально. Лучший подход, о котором я могу сейчас подумать, - это поплавать все слева, с соответствующей шириной и левым краем, и использовать параметры переполнения-y (и, где горизонтальная прокрутка имеет смысл, переполнение-x) для рассматриваемых DIV.

Является ли "float all left и set width and margin-left" оптимальным, а если нет, то что будет более идиоматичным способом замены кадров?

Благодаря,

  • 0
    Я бы использовал абсолютное позиционирование, просто потому что оно никогда не переносится, а ширина предсказуема даже с отступом (если вы не хотите, чтобы это было на каком-то уровне, но медиа-запросы могут быть хороши для этого)
Теги:
frames

1 ответ

1
Лучший ответ

Замена кадров сложна, если разные фреймы используют разные таблицы стилей, JS и что нет.

Если это не проблема в вашем случае, и вы можете просто скопировать отредактированную часть HTML из трех фреймов на одну новую HTML-страницу с тремя вертикальными DIV в некотором роде, я бы предположил, что вы используете что-то описанное выше методом переполнения, Расположите их абсолютно с шириной 33% и высотой 100%.

Вы можете использовать поплавки, но это может привести к возникновению всех неприятных проблем. В случае с Йору я бы пошел на position: absolute

<div class="c c1">
    loooooong content
</div>
<div class="c c2">
    loooooong content
</div>
<div class="c c3">   
    loooooong content
</div>

.c {
    position: absolute;
    width: 33%;
    height: 100%;
    top: 0;
    overflow-y: scroll;
}
.c1 {
    left: 0;
}
.c2 {
     left: 33%;
}
.c3 {
    left: 66%;
    width: 34%;
}

здесь jsfiddle: http://jsfiddle.net/9CAYb/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню