css - 在绝对定位的 div 内浮动

Question

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

见图片：

忍者编辑： 您的绝对和浮动代码完美运行，但在我的情况下不是。我试图简化问题，但显然还有其他问题。一旦我弄清楚原因，我会尽快回复你。对不起。

编辑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小提琴

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

Answer 1

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

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

Answer 2

浮动对父容器的宽度/高度没有贡献，但是您可以使用

display:inline-block

或者对于更复杂的情况显示为：表格、表格单元格、表格行等。

更多信息请访问：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;
}