0

我正在尝试<div>使用以下代码创建一个简单的两列设计，其中包含两个 inline-block ：

<!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 覆盖此功能？

4

2 回答 2

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

试试这个元标记

于 2013-07-28T20:59:15.563 回答
0

我通过添加white-space: nowrap;到#wrap元素和类white-space: normal;来解决这个问题.col。我猜 Opera Mobile 将其解释divs为“文本”，因为它们是内联块。

于 2013-07-28T21:11:39.013 回答