我有这个 fiddle
我试图让带有“b”字母的 div 的左边缘与带有“a”字母的 div 的右边缘对齐。
诀窍是,在实际应用中,左边div的left
属性没有设置(意味着它的左边位置会改变),并且有可变数量的字符(意味着它的宽度会改变)。
更新——我添加了一些 div 以使其更加清晰。在所有情况下,我都希望“右”div 的左边缘与左 div 的右边缘相对,它的宽度可能会因其内容而异。此外,未显示的是,左侧 div 的左侧属性可以随行变化。
最佳答案
尝试:
<html>
<head></head>
<body>
<div>
<div style="display:inline">b</div>
<div style="display:inline">a</div>
</div>
</body>
</html>
注意:Span 本质上是内联的:
上面的行为应该与此相同:
<html>
<head></head>
<body>
<div>
<span>b</span>
<span>a</span>
</div>
</body>
</html>
编辑:基于fiddler
从样式表中的 div 中删除绝对位置。
不要在 div 之间放置空格,这包括换行符(因为多个空格将被单个空格替换,但它有大小)。
<div style="top:10px">
<!-- ^^^^^ No absolute here -->
<div style="display:inline">aaaa</div><div style="display:inline">bbbb</div>
<!-- ^^^^^^ No Space here -->
</div>
看这里:
http://jsfiddle.net/sNqpP/我为第一行 aaaabbbb
更改了它,但没有为其他行更改它。
关于css将两个div定位在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8594003/