Question

我有这个小提琴

我试图用'b'字母得到div，使其左边缘与'a'字母对着div的右边缘。

诀窍是，在实际应用中，左div的left属性未设置（意味着它的左侧位置将改变），并且有可变数量的字符（意味着它的宽度将改变）

更新 - 我添加了一些更多的div更清楚。在所有情况下，我希望'right'div的左边缘与左div的右边缘对齐，由于其内容，其宽度可能会有所不同。另外，未示出，左div的left属性可以在行之间变化。

Answer 1

尝试：

<html>
<head></head>
<body>
    <div>
        <div style="display:inline">b</div>
        <div style="display:inline">a</div>
    </div>
</body>
</html>

注意：跨度本质上是内联的：
以上应该与此相同：

<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更改了它，但没有为其他行更改。

Answer 2

您的解决方案：

http://jsfiddle.net/JsZ9q/9/

添加float: left;，将position: absolute;替换为position: relative;以使其发挥作用，并将margin-left（或left）设置为0。您可以忽略clear属性 - 为了便于阅读，我只添加了这些属性。

顺便说一下，这个例子搞清楚CSS与HTML分离的基本原因 - HTML创建结构; CSS提供样式。

在任何时候你都不应该在HTML中使用style属性，特别是因为div的宽度只在运行时定义，而你只在CSS中运行它（没有JS）。最后，尽可能避免绝对定位。

Answer 3

Float这样做：

.left {
    float:left;
}

.right {
   float:left; 
}

http://www.w3schools.com/cssref/pr_class_float.asp

或者我在你的问题中遗漏了什么？

如果必须使用绝对定位，则需要知道最左边div的宽度。这将涉及一些JS。如果那是你的问题，请告诉我。

Answer 4

使用包装器进行定位：I Forked your Fiddle

Answer 5

您需要拥有一个宽度为的父对象，以便将子对象直接浮动到彼此：http://jsfiddle.net/alanweibel/6aGbU/

<style type="text/css">
.wrap
{
    width:100%;
}
.left
{
    float:left;
}
</style>
<div class="wrap">
    <div class="left">aaaa</div>
    <div class="left">bbbb</div>
</div>

css将两个div放在一起

5 个答案:

编辑：基于fiddler