请考虑以下示例:
正如您所看到的那样,两个框重叠而不是使用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标签。道歉。
答案 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>
答案 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。
如果您想重构代码,请使用以下代码段
padding: 1px;
padding-left:3px;
padding-right:1px;
可以写成padding: 1px 1px 1px 3px;
,这只是简写语法