题

我预计跨越两个标记在下面的样本显示，相反，它们显示一下。如果我设定的宽度之类的跨越。右到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>

谢谢你的解释。浮：左精美的作品的预期结果在FF3.1.不幸的是，在IE6右侧跨越呈现50%的50%，在生效给它一个宽度的25％的浏览器窗口。设置其宽度为100%达到了预期的结果，但符FF3.1其是在标准的遵守模式和我理解这一点。让它工作都在FF和即6,而不是诉诸黑客攻击或使用多CSS片已经是一个挑战

有帮助吗？

解决方案 

float: left;

尝试增加到跨度。左

它将导致它浮于离开(如建议的syntax).

我不是一个CSS专家通过任何手段，所以请不要把这个作为享有无可争辩的事实，但我发现的东西时浮动，没有差别的垂直位置事情如下。

如果你浮动的范围。右边右边，然后添加文在他们之下的你应该得到一些有趣的结果，阻止这些"有趣的结果，"可以使用"明确的：左右都"，这将导致块的明确的定型以下任何东西浮动的左右两者。 W3Schools 有一个网页在这个酒店太。

欢迎计算器.

其他提示

这是因为内联和内联块包括空白(在情况下的断线)之间的元素。在你的情况的合并宽度的要素是50%+50%+空白>100%以上。

你应该把两种元素的同行在HTML文件(没有空间)

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

或者使用HTML意见

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

我自己喜欢的后者。

我不喜欢这个黑客，但它似乎要做的工作无论在火狐和IE6:

span.right {
  vertical-align:top; 
  display:inline-block;
  text-align:right;
  height:80px;
  width:50%;
  *width:100%;
  background-color:red;
}

注意到 *width: 100% 这似乎满足IE6的需要和被忽略的火狐。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top