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

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