Question

请考虑以下示例：

正如您所看到的那样，两个框重叠而不是使用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标签。道歉。

Answer 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

Answer 2

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

Answer 3

首先，如果您使用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;，这只是简写语法

使用Position定位DIV：绝对元素

3 个答案: