跨行内联块
时间：2020-03-05 18:45:02 来源:igfitidea点击:
我希望以下示例中的两个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。
回答
我不喜欢这种骇客，但它似乎在Firefox和IE6中都能做到：
span.right {
vertical-align:top;
display:inline-block;
text-align:right;
height:80px;
width:50%;
*width:100%;
background-color:red;
}
注意" * width：100％"，它似乎满足IE6的要求，但被Firefox忽略。
