使用Position定位DIV:绝对元素

时间:2014-02-27 18:51:07

标签: html css css-float css-position

请考虑以下示例:

http://jsfiddle.net/AsGk4/

正如您所看到的那样,两个框重叠而不是使用float:left属性彼此相邻。当我删除孩子.text DIV时,框会按原样显示。我假设此行为来自.text的{​​{1}}属性,但为什么这会对父DIV的外观产生影响?

HTML

position:absolute

CSS

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

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

修改

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

3 个答案:

答案 0 :(得分:1)

关闭文本div,它工作得很好。

<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

答案 1 :(得分:1)

您的结束<div>代码未关闭 - 您需要将其更改为</div>。这导致盒子彼此嵌套而不是并排。

答案 2 :(得分:1)

首先,如果您使用float: left;,则不需要display: inline-block;,反之亦然。

如果您使用float,请不要忘记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;,这只是简写语法