漂浮在绝对定位的div内

Question

是否可以在绝对定位div中有多个浮点数而不指定绝对容器的宽度？

见图片：

Ninja编辑： 你的绝对和浮动代码完美无缺，但不是我的情况。我试图简化问题，但显然还有其他问题。我一找出原因便立刻回复你。遗憾。

编辑2： 对，这就是我遇到问题的原因。

HTML

<div id="anotherContainer">
    Outercontainer
    <div class="main">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</div>

CSS

#anotherContainer {
    position: relative;
    outline: 4px solid red;
    width: auto;
    height: auto;
    display: inline-block;
}

.main{
    border: 1px solid #f00;
    position: absolute;
}

.left{
    float: left;
    border: 1px solid #0f0;
    padding: 20px;
}

.right{
    float: right;
    border: 1px solid #00f;
    padding: 20px;
}​

JS fiddle

我的错误，我认为容器#anotherContainer对此没有任何影响。

Answer 1

删除相对于#anotherContainer问题的位置将被解决。 检查jsfiddle工作链接

http://jsfiddle.net/rP76V/3/

Answer 2

浮点数不会影响父容器的宽度/高度，但您可以使用

display:inline-block

或者对于更复杂的情况显示为：table，table-cell，table-row等。

详情请见：http://www.w3schools.com/cssref/pr_class_display.asp

回顾（示例）

<div style="position:absolute;border:solid 1px red;">
  <div style="display:inline-block">A</div>
  <div style="display:inline-block">B</div>
</div>​

您也无法指定内部div的宽度，并允许浏览器使用

进行选择

<div style="position:absolute;border:solid 1px red; display:table-row">
  <div style="display:table-cell">A</div>
  <div style="display:table-cell">B</div>
</div>​

这样，两个div都具有相同的高度。

如果你想让内部div具有相同的宽度，那么：

<div style="position:absolute;border:solid 1px red; display:table-row">
  <div style="display:table-cell;width:50%">A</div>
  <div style="display:table-cell;width:50%">Blejf lkwejf lwekfjlkw ejfjwelf jlkwe jflkw elfk wlek flkwe flk wjelfkj lwke jflkw elkfjlwej lfkwjelkf lkweflk</div>
</div>​

Answer 3

查看演示 - http://jsfiddle.net/c9ShQ/

HTML

<div class="main">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

CSS

.main{
    border: 1px solid #f00;
    position: absolute;
}

.left{
    float: left;
    border: 1px solid #0f0;
    padding: 20px;
}

.right{
    float: right;
    border: 1px solid #00f;
    padding: 20px;
}