为什么这个CSS不适合？

10 浏览
0 Comments

为什么这个CSS不适合？

我有一个宽度为970px的div。（当然，这不包括边框、外边距和填充）。我在其中放置了两个并排的div。这是它们的CSS样式：

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; }

当内部div的总宽度小于等于966px时，这个方法运行良好。然而，当我超过这个宽度时，第二个div会放在第一个div的下方。为什么会这样？

据我所知，我应该在总宽度达到970px之前不会遇到问题。

0

3 答案

0 Comments

为什么这个CSS不适用？

这个问题的原因是HTML中两个div之间有一个换行符。

对于以下CSS：

#main { width: 970px; }
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }

以下两个HTML标记之间存在差异：

和

可以查看此示例：http://jsfiddle.net/vnguQ/ ，注意第二部分元素之间的白线。

这是因为使用了`display: inline-block`。将其替换为`float: left`并检查结果。

0
0 Comments

为什么这个CSS不适用？

这个问题发生在主div的display属性为"block"（默认值）时。

为主div添加一个属性display:inline，它会自动调整内部div的宽度。更改主div的CSS。

#main { width: 970px; display:inline; }
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }

这个问题的原因是主div的display属性为"block"时，无法正确适应内部div的宽度。解决方法是将主div的display属性改为"inline"。通过将主div的display属性设置为"inline"，可以使内部div自动调整宽度。在CSS中更改主div的属性即可。代码如下：

#main { width: 970px; display:inline; }
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }

这样，主div的display属性被修改为"inline"，解决了CSS不适用的问题。

0
0 Comments

为什么这个CSS不适用？

有一个问题导致CSS不适用，那就是在两个div之间可能存在空白。这个问题可能是由于使用了inline block样式来应用这个空白导致的。以下是一些相关链接，可以帮助解决这个问题：

1. [Fighting the Space Between Inline Block Elements](http://css-tricks.com/fighting-the-space-between-inline-block-elements/)

2. [Display: inline-block extra margin](https://stackoverflow.com/questions/1833734)

3. [How to remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239)

这些链接提供了一些解决这个问题的方法和技巧，可以帮助我们去除这些空白并让CSS适用。

0