定位的div位置：绝对元素

正如你可以看到两个箱子重叠，而不是被定位为紧挨彼此float:left财产。当我删除小孩.text DIV时，这些框显示为他们应该。我认为这种行为来自.text的position:absolute属性，但为什么这会影响父DIV的外观？

HTML

<div class="box"> 
    <div class='text'><span>Some text</span><div> 
</div> 

<div class="box"> 
    <div class='text'><span>Some text</span><div> 
</div>

CSS

.box { 
    position: relative; 
    display:inline-block; 
    width:100px; 
    height:100px; 
    background-color:#0000FF; 
    float:left; 
} 
.box:before { 
    content:''; 
    position: absolute; 
    left: 1%; 
    top: 1%; 
    width: 98%; 
    height: 98%; 
    border: 1px solid white; 
} 
.text { 
    position: absolute; 
    bottom:9px; 
    left:5px; 
    width: 95%; 
    text-align:left; 
} 
.text span { 
    color: white; 
    font: bold 12px/16px Helvetica, Sans-Serif; 
    background: rgb(0, 0, 0); 
    /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); 
    padding: 1px; 
    padding-left:3px; 
    padding-right:1px; 
}

编辑：

我傻了，忘了关闭div标签。道歉。

来源

2014-02-27 astralmaster

首先，如果你使用的是display: inline-block;反之亦然如果你正在使用float你不需要float: left; ..

然后不要忘记clear他们，如果你与display: inline-block;坚持那么我想您将需要vertial-align: top;，因为它们默认与基线对齐。因此，使用任何一个，因为同时使用似乎是多余的

另外值得注意的是使用display: inline-block;会导致你的空白

又有什么问题？您正在关闭您的div标签，there are many ways to deal with that。

Demo

如果你想重构你的代码，下面的代码片段

padding: 1px; 
padding-left:3px; 
padding-right:1px;

可以写成padding: 1px 1px 1px 3px;这不过是简写语法

来源

2014-02-27 18:58:09

Voopsy，傻我！如果你连续两天没有睡觉，情况就会如此。道歉。 – astralmaster

关闭文本divs，它工作得很好。

<div class="box"> 
    <div class='text'><span>Some text</span></div> 
</div> 

<div class="box"> 
    <div class='text'><span>Some text</span></div> 
</div>

见updated Fiddle

来源

2014-02-27 18:58:02 Phoenix

Voopsy，我傻！如果你连续两天没有睡觉，情况就会如此。道歉。 – astralmaster

您的交易<div>标签不打烊 - 你需要将其更改为</div>。这导致盒子相互嵌套，而不是并排放置。

来源

2014-02-27 18:58:06 essmahr

定位的div位置：绝对元素

回答

相关问题