我在两个
之间发现了一些奇怪的空白。
每个
你的空白是因为在div之间存在空白。行内元素之间的空格被解释为空格。
你有:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
修改为:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
然而,这并不是实现你想要的效果的好方法。
如果你想要的是浮动元素,你应该使用float属性来实现。
使用:
float:left;
clear:none;
在两个 `div` 中:如果您想保留您的编码布局,请避免使用浮动,并将每个 div 放在自己的单独行上...
<div id="leftSide">这里有一些内容</div><!--
--><div id="rightSide">这里有更多的内容</div>
h1 {
padding:0;
margin:0;
}
margin: 0;
即可在大多数情况下起作用。除非该元素已经具有填充,否则不需要使用 padding:0;
。 - kmoser<div id="left_side">
...
</div><div id="right_side">
...
</div>
你也可以将 display: flex;
添加到 div 的父容器中(在这种情况下,是 body
)。Fiddle。
display: inline-block
,我更倾向于建议使用 display: inline-flex
。 - Sunny最佳方法是将父元素的字体大小设置为0,然后将子元素内部的普通字体大小设置为正常(否则会从父元素继承0)
</div><div id="right_side">
将两个元素都向左浮动,同时将30%的宽度调整为40%以填满所有空间,但这并非必要。请注意,“inline-block”不受IE7支持,但可以通过解决方法进行修复。
border: 1px solid red;
(垂直)和float: left;
(水平),并删除空格解决了这个问题。