1

我正在尝试将此菜单放在页面的左侧：

<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包含所有主要内容的第二个，这些内容也需要向右移动，到目前为止，我使用的是相对值，无论屏幕大小如何，它似乎都有效。

4

5 回答 5

5

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>

在大多数情况下，您还希望为主要内容提供 a padding-left，这样它就不会“粘”在菜单上。

顺便说一句，将上面的内容更改为微不足道，使菜单位于右侧而不是左侧：只需将每次出现的单词“left”更改为“right”。

啊，最后一件事。如果菜单的内容高于主要内容，它会因为float做了一些奇怪的事情而奇怪地呈现。在这种情况下，您必须清除浮体下方的框，如 bmatthews68 的示例所示。

/编辑：该死的，HTML 不像预览显示的那样工作。好吧，我已经包含了图片。

于 2008-09-14T08:29:26.413 回答
3

我认为你应该使用float属性来定位这样的东西。你可以在这里读到它。

于 2008-09-14T06:04:48.710 回答
2

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

CSS 是高度上下文相关的，页面的流程取决于 HTML 的结构。正常流程是元素及其子元素如何在其包含块（通常是父元素）内从上到下（对于块元素）和从左到右（对于内联元素）进行布局。这就是你的大部分布局应该如何工作的。您将倾向于依赖width, margin, 并将padding元素的间距和布局定义到它周围的其他元素（无论是<div>, <ul>,<p>还是其他元素，此时 HTML 主要是语义化的）。

float使用或absolute或定位之类的样式relative可以帮助您实现非常具体的布局目标，但了解如何使用它们很重要。如前所述，float通常用于将块元素彼此相邻放置，并且非常适合多列布局。

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

于 2008-09-14T16:19:01.027 回答
0

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

首先，我为布局中的两列定义了名为 left 和 right 的样式，以及一个名为 clearer 的样式，用于重置页面流。

<style type="text/css">
。剩下 {
    向左飘浮;
    宽度：200px；
}
。对 {
    浮动：对；
    宽度：800 像素；
}
。清除 {
    明确：两者；
    高度：1px；
}
</style>

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

<div>
 <div class="左">
   <ul>
    <li>类别</li>
    <li>武器</li>
    <li>盔甲</li>
    <li>手册</li>
    <li>营养</li>
    <li>测试</li>
  </ul>
 </div>
 <div class="对">
   等等等等等等....
 </div>
</div>
<div class="clear" />
于 2008-09-14T06:45:40.233 回答
0

你可以使用浮动

<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;}
于 2013-04-02T16:33:47.007 回答