我目前正在开发一个网站，遇到了一个奇怪的问题，让我的两个 div 保持在同一条线上。有问题的页面在这里:http://bit.ly/13QE7Zi我要修复的 div 是中间的文本 div 和它旁边的小图像。在 CSS 中，我将这些 div 设置为占用 1000px (20+640+20+300+20)，这是容器元素的宽度，但是如果我这样做，第二个 div 会被推到下一行。仅当我将文本 div 的宽度减小 3 px 时它才有效，这是不可取的，因为这样图像的边缘就不会与页面的右侧正确对齐。这发生在 Chrome 和 Firefox 中。我不想使用 float ，因为这会破坏页面的其他方面。我如何让这两个 div 保持在同一条线上并仍然填充整个 1000 像素的宽度？
最佳答案
发生这种情况的原因是因为两个内联 block 之间有一个“空格”字符。
HTML 并没有真正忽略所有空白。两个元素之间可以有 1000 个空格和换行符，HTML 会在显示时将所有这些空格压缩为 1 个空格。
您的内联 block 的设置方式使它们的宽度加起来恰好为 1000 像素，但是您在两个包含元素之间有一个新行，该行压缩为 1 个空格。您的精确测量不考虑这个额外的空间，因此您的内联 block 换行到下一行。
关于css - 两个 div 不会填满容器的整个宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17726117/