Как переопределить «Перенос текста» в Opera Mobile

Я пытаюсь создать простой дизайн с двумя столбцами с двумя встроенными блоками <div>, используя следующий код:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
body, html { 
   margin: 0;
}

#outer {
    background: #F00;
    padding-top: 10px;
}

.col {
    display: inline-block;
    width: 50%;
    background: #00F;
    margin-top: 10px;
    vertical-align: top;
}
</style>
</head>
<body>
    <div id="outer">
        <div class="col">
            Lorem ipsum dolor sit amet
        </div><!--
        --><div class="col">
            consectetur adipiscing elit.
        </div>
</div>
</body>
</html>

Однако у меня возникла проблема с Opera Mobile (Opera Classic). В этом браузере по умолчанию включен параметр «Обтекание текстом». При отключении страница отображается так, как нужно:

Отображается правильно

Однако, когда эта функция включена, она отображается следующим образом:

Неверное отображение

Есть ли способ переопределить эту функцию с помощью HTML или CSS?


mobile css opera mobile-browser
person Brendon    schedule 28.07.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

попробуй этот метатег

person Community    schedule 28.07.2013

arrow_upward
0
arrow_downward

Я решил эту проблему, добавив white-space: nowrap; к элементу #wrap и white-space: normal; к классам .col. Я предполагаю, что Opera Mobile интерпретировала divs как «текстовый», поскольку они были встроенными блоками.

person Brendon    schedule 28.07.2013
comment
Обратите внимание, что это решение не идеально, так как я бы предпочел, чтобы div переносился, если общая ширина превышает размер экрана. Лучшие решения приветствуются. - person Brendon; 29.07.2013