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>
感谢您的解释.float:left与FF 3.1中的预期结果完美配合.不幸的是,在IE6中,右侧跨度呈现50%的50%,实际上使其宽度为浏览器窗口的25%.将其宽度设置为100%可实现所需的结果,但在符合标准的FF 3.1中会中断,我理解这一点.让它在FF和IE 6中工作,而不是诉诸黑客或使用多个CSS表一直是一个挑战
float: left;
尝试将其添加到 span.left
它会导致它向左浮动（按照语法的建议）。
无论如何，我都不是 CSS 专家，所以请不要将此视为无可争议的事实，但我发现当某些东西浮动时，它对其下方的东西的垂直位置没有影响。
如果将 span.right 向右浮动，然后在其下方添加文本，您应该会得到一些有趣的结果，要停止这些“有趣的结果”，您可以使用“clear：left/right/both”，这将导致具有清晰样式的块位于向左/向右/两者浮动的任何物体下方。W3Schools也有关于此属性的页面。
欢迎来到 Stackoverflow。