-
09-06-2019 - |
题
我预计跨越两个标记在下面的样本显示,相反,它们显示一下。如果我设定的宽度之类的跨越。右到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的需要和被忽略的火狐。
不隶属于 StackOverflow