我正在尝试放置此菜单：

<div class="left-menu" style="left: 123px; top: 355px">  
    <ul>  
        <li> Categories </li>  
        <li> Weapons </li>  
        <li> Armor </li>  
        <li> Manuals </li>  
        <li> Sustenance </li>  
        <li> Test </li>  
    </ul>  
</div>

在页面的左侧。问题是，如果我使用绝对值或者固定值。
不同的屏幕尺寸将以不同的方式呈现导航栏。我还有第二个div，其中包含所有主要内容，这些内容也需要移到右侧，到目前为止，我正在使用相对值，无论屏幕大小，该相对值似乎都有效。

解决方案

回答

我认为我们应该使用float属性来定位类似的内容。你可以在这里读到它。

回答

我们应该使用float和clear CSS属性来获得所需的效果。

首先，我为布局中的两列分别定义了称为left和right的样式，以及一种用于清除页面流的名为clearer的样式。

<style type="text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

然后，我用它们来布局我的页面。

<div>
 <div class="left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class="right">
   Blah Blah Blah....
 </div>
</div>
<div class="clear" />

回答

实际上，" float"是实现此目标的正确属性。但是，可以改进bmatthews68给出的示例。关于浮动框的最重要的事情是它们必须指定一个显式的宽度。这可能很不方便，但这就是CSS的工作方式。但是，请注意，" px"是一个度量单位，在HTML / CSS世界中没有任何位置，至少没有指定宽度。

始终采取适用于不同字体大小的措施，即使用em或者％。现在，如果菜单被实现为浮动主体，则意味着主要内容在其周围浮动。如果主要内容高于菜单，则可能不是我们想要的：

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>

我们可以通过为主要内容赋予等于菜单宽度的" margin-left"来纠正此问题：

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>

在大多数情况下，我们还希望为主要内容提供一个" padding-left"，以便它不会太紧贴菜单。

顺便说一句，更改上面的内容很简单，以使菜单在右侧而不是左侧：只需将单词的每次出现从左到右更改。

啊，最后一件事。如果菜单的内容高于主要内容，则由于" float"做了一些奇怪的事情，它将呈现奇怪的效果。在这种情况下，我们将必须清除浮动主体下方的框，如bmatthews68的示例。

/编辑：该死，HTML无法以预览显示的方式运行。好吧，我改写了图片。

回答

所有回答说使用浮点数(具有明确的宽度)的答案都是正确的。但是要回答最初的问题，放置<div>的最佳方法是什么？这取决于。

CSS具有高度的上下文关系，页面的流程取决于HTML的结构。正常流程是元素及其子元素在其包含的块(通常是父元素)内从上到下(对于块元素)和从左到右(对于内联元素)布局的方式。这就是大多数布局应如何工作的方式。我们将倾向于依靠width，margin和padding来定义元素与周围其他元素的间距和布局(它们分别是<div>，<ul>，< p>`，否则，HTML在这一点上主要是语义上的)。

使用"浮动"，"绝对"或者"相对"定位等样式可以实现非常具体的布局目标，但是了解如何使用它们很重要。如前所述，" float"通常用于将块元素彼此相邻放置，这对于多列布局确实非常有用。

在这里我不会详细介绍，但是我们可能需要查看以下内容：

• SitePoint CSS参考-可能是我在线上找到的最直接，最完整的CSS参考。
• W3C CSS2.1视觉格式模型-是的，虽然很难理解，但确实可以解释所有内容。