css将两个div定位在一起

标签 css

我有这个 fiddle

http://jsfiddle.net/JsZ9q/5/

我试图让带有“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/

相关文章:

html - 为什么 margin-top 会影响绝对 div 的位置?

html - 响应图像 - 额外填充?

javascript - 删除 Bootstrap 的验证图标

html - 两个不同的 div 以相同的样式显示,即使我为每个 div 指定了不同的颜色

html - 当我开始动画时,CSS Border 将文本向下移动

html - Textarea首行加粗

javascript - 更改传单图层控件图标

javascript - 提高 JS 滚动动画在 Google Chrome 以外的浏览器中的性能

html - Avada wordpress 主题 div 之间令人讨厌的 5px 空白;边距顶部 : -5px works but padding-top: -5px doesnt work

javascript - 如何取消淡出?