是否可以在绝对定位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;
}
我的错误,我认为容器#anotherContainer对此没有任何影响。
答案 0 :(得分:5)
删除相对于#anotherContainer
问题的位置将被解决。
检查jsfiddle工作链接
答案 1 :(得分:3)
浮点数不会影响父容器的宽度/高度,但您可以使用
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>
答案 2 :(得分:1)
查看演示 - 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;
}