【问题标题】:What is the best way to position a div in CSS?在 CSS 中定位 div 的最佳方式是什么?
【发布时间】:2026-02-16 11:25:02
【问题描述】:

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

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

【问题讨论】:

    标签: css layout


    【解决方案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,这样它就不会“粘”在菜单上。

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

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

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

    【讨论】:

      【解决方案2】:

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

      【讨论】:

        【解决方案3】:

        所有使用浮点数(具有明确宽度)的答案都是正确的。但要回答最初的问题,定位&lt;div&gt; 的最佳方式是什么?视情况而定。

        CSS 是高度上下文相关的,页面的流程取决于 HTML 的结构。正常流程是元素及其子元素如何在其包含块(通常是父元素)内从上到下(对于块元素)和从左到右(对于内联元素)进行布局。这就是你的大部分布局应该如何工作的。您将倾向于依赖 widthmarginpadding 来定义元素与其周围其他元素的间距和布局(无论是 &lt;div&gt;&lt;ul&gt;&lt;p&gt; 还是其他元素) , HTML 在这一点上主要是语义的)。

        使用floatabsoluterelative 等样式定位可以帮助您实现非常具体的布局目标,但了解如何使用它们很重要。如前所述,float 通常用于将块元素并排放置,非常适合多列布局。

        我不会在这里详细介绍,但您可能想查看以下内容:

        【讨论】:

          【解决方案4】:

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

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

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

          • 类别
          • 武器
          • 盔甲
          • 手册
          • 营养
          • 测试
          等等等等等等....

          【讨论】:

          • 您的 'clearer' div 类与 CSS 中使用的 '.clear' 选择器不匹配。
          • 谢谢鲍比。我应该在发布之前仔细检查一下。
          【解决方案5】:

          你可以使用浮动

          <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;}
          

          【讨论】:

            最近更新 更多