Question

我正在尝试放置此菜单：

<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，它们也需要向右移动，到目前为止，我使用的是相对值，无论屏幕尺寸如何，它都可以正常工作。

Answer 1

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不像预览显示的那样工作。好吧，我已经包含了图片。

Answer 2

我认为你应该使用 float 属性来定位这样的东西。 You can read about it here.

Answer 3

所有使用浮动（具有显式宽度）的答案都是正确的。但要回答原始问题，定位<div>的最佳方法是什么？这取决于。

CSS具有高度上下文性，页面流程取决于HTML的结构。正常流是元素及其子元素在其包含块（通常是父元素）内从上到下（对于块元素）和从左到右（对于内联元素）布局的方式。这就是大多数布局应该如何工作的方式。您将倾向于依靠width，margin和padding来定义元素与其周围其他元素的间距和布局（可以是<div>，{{ 1}}，<ul>或者其他，HTML在这一点上主要是语义的）。

使用<p>或float或absolute定位等样式可以帮助您实现布局的特定目标，但了解如何使用它们非常重要。如上所述，relative通常用于将块元素彼此相邻放置，这对于多列布局非常有用。

我不会在此处详细介绍，但您可能需要查看以下内容：

SitePoint CSS References - 可能是我在网上找到的最简单，最完整的CSS参考。
W3C CSS2.1 Visual Formatting Model - 是的，这是一本艰难的读物，但确实解释了一切。

Answer 4

您应该使用float并清除CSS属性以获得所需的效果。

首先，我为布局中的两列定义了被调用左侧和右侧的样式，并使用了一个名为“更清晰”的样式来重置页面流。

<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" />

Answer 5

你可以使用float

<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>

在css文件中

.left-menu{float:left;width:200px;}

在css中定位div的最佳方法是什么？

5 个答案: