html - 项目自动调整为页面的全宽，无需定义此类

Question

我留给一个真正的奇迹。或者实际上：恐怖。不知何故，无论我输入/定义/编码/创建什么，它都会自动调整到页面的整个宽度。即使你定义的更小，div 本身也会以某种方式延伸到页面的整个宽度。

我已将其完全剥离为基础知识。将文件复制到别处并更改名称，以免它们干扰同名文件。

查看屏幕截图，包括所有代码。

如您所见：我创建了一组 DIV，一个有宽度定义，一个没有宽度定义。然而，他们似乎都到了页面的最后。

谁有想法？不知何故，问题出现在编辑器中作为浏览器（chrome）。

提前致谢

Answer 1

块元素占用 BLOCKS（=100% 宽度，即使不可见）。如果您想在它旁边放一些东西，请使用 FLOATSfloat:left或将元素更改为另一种类型display:inline-block或display:inline.

你看到的是预期的行为。

Answer 2

这不成问题。是div块元素。它总是试图占据 100% 的可用水平空间。

因此asdfgh_nowidth占用 100% 的宽度，而asdfgh仅占用 75 像素。

编辑：看看这个：http ://codepen.io/gopkar/pen/HpAev

EDIT2：制作一个div float将使其占用其孩子的空间。更新了笔。

Answer 3

默认情况下，它<div>是一个块元素，即style="display:block"所有这些block元素占据width=100%容器宽度的 100%（在这种情况下是页面本身。）。

因此，除非您明确指定宽度，<div>否则它将默认为宽度的 100%，或者您可以简单地定义style="display:inline"以获取内容的大小。