如何定位Float？

Question

如何在此页面http://morriswebsitedesign.com/about.html上制作内容文字，与导航链接对齐？我曾经使用绝对属性或表，但现在我想弄清楚如何使用 float 。

我希望它看起来像这样： 一个BBB

其中A是导航而B是内容。

Answer 1

您的文字和导航链接太宽，无法容纳其div。如果您希望它们排成一行，则必须增加包含div的大小，或者减小文本和/或导航链接的大小。

例如，当我使用以下样式时，它们在我的计算机上完美排列：

#content { width:700px; }

---

您必须使用样式div将微缩徽标和导航链接包裹在float:left;中。然后，您可以从微缩徽标和float:left。

中删除ul

Answer 2

首先从#content中移除float：left，这将使你的#content位于菜单的右侧。

其次，如果你不想让部分文字出现在菜单下，请给它一个溢出：隐藏。

#menu{float:left}
#content{overflow:hidden}

这样您就不需要为内容提供任何宽度。

为了在它们之间留出一些空间，您可以在菜单上给出边距右边距和边距底部。

#menu{margin-right:20px; margin-bottom:20px}

我在你的CSS中看到你的'p'有优势。这使得您的内容的顶部不会与您的菜单对齐。您可以使用css3删除第一个元素的边距。

#content p:nth-child(1){margin-top:0}

修改 要将#content与徽标对齐：

#logo2{width:200px; float:left}
#menu{width:200px; float:left; clear:left; margin-bottom:100px}
#content{display:inline}

首先，您需要您的徽标，并且您的菜单充当列，以使两者必须具有相同的宽度，并浮动到左侧。清除左侧将使您的菜单在徽标下移动 然后选择#content remove any float：left并给它一个显示：inline，这样它就不再作为一个块了。
菜单的边距底部是为了使您的文字不会在菜单下移动，但您可以尝试将菜单设置得更高。

Answer 3

在CSS中使用float时，你添加浮动的项目也应该有宽度。

http://jsbin.com/azetuk/

但是当你漂浮时，你需要知道清除那些花车。这是一个很好的阅读：

http://css-tricks.com/the-how-and-why-of-clearing-floats/

如果您也想要内容旁边的徽标，请在div中包装菜单和徽标，然后浮动该元素

http://jsbin.com/itaqok/