跨度上的内联块

Question

跨度上的内联块

ram*_*ams 6 html css css-float internet-explorer-6

我希望下面示例中的两个span标签彼此相邻显示,而不是一个在另一个下面显示.如果我将类span.right的宽度设置为49%,它们会彼此相邻显示.我无法弄清楚为什么右侧跨度被推下来,因为右侧跨度有一些看不见的填充/边距,这使得它需要超过50%.我试图在不使用html表的情况下完成此操作.有任何想法吗？

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            margin: 0;
        }

        html,body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            border:none;
        }

        div.header{
            width:100%;
            height:80px;
            vertical-align:top;
        }

        span.left {
            height:80px;
            width:50%;
            display:inline-block;
            background-color:pink;
        }

        span.right {
            vertical-align:top; 
            display:inline-block;
            text-align:right;
            height:80px;
            width:50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='header'>
        <span class='left'>Left Span 50% width</span>
        <span class='right'>Right Span 50% width</span>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

感谢您的解释.float:left与FF 3.1中的预期结果完美配合.不幸的是,在IE6中,右侧跨度呈现50%的50%,实际上使其宽度为浏览器窗口的25%.将其宽度设置为100%可实现所需的结果,但在符合标准的FF 3.1中会中断,我理解这一点.让它在FF和IE 6中工作,而不是诉诸黑客或使用多个CSS表一直是一个挑战

Answer 1

Tei*_*ion 3

float: left;

Run Code Online (Sandbox Code Playgroud)

尝试将其添加到 span.left

它会导致它向左浮动（按照语法的建议）。

无论如何，我都不是 CSS 专家，所以请不要将此视为无可争议的事实，但我发现当某些东西浮动时，它对其下方的东西的垂直位置没有影响。

如果将 span.right 向右浮动，然后在其下方添加文本，您应该会得到一些有趣的结果，要停止这些“有趣的结果”，您可以使用“clear：left/right/both”，这将导致具有清晰样式的块位于向左/向右/两者浮动的任何物体下方。W3Schools也有关于此属性的页面。

欢迎来到 Stackoverflow。

归档时间：	17 年，4 月前
查看次数：	17062 次
最近记录：	6 年，3 月前