什么是最好的方式来位置的一div css?

StackOverflow https://stackoverflow.com/questions/61155

  •  09-06-2019
  •  | 
  •  

题

我想把这个菜单：

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

在左手边的网页。问题是，如果我用绝对的或固定的价值观。
不同大小的屏幕就会使导航条不同。我也有一个第二部，包含了所有主要内容，这也需要移动的权利，到目前为止，我使用的是相对值，这似乎是工作没有问题。

有帮助吗？

解决方案

float 确实是正确的财产来实现这一点。然而，所给出的例子通过bmatthews68可以改进。最重要的事情有关浮箱那是他们 必须 指定一个明确的宽度。这可以是相当不方便，但是这种方式CSS工作。然而，请注意 px 是一种测量单位，没有发生在世界上的HTML/CSS，至少不要指定的宽度。

总是诉诸的措施，将工作与不同的字体大小，即要么使用 em 或 %.现在，如果菜单是实现为一个浮体，那么这意味着，主要内容浮"周围"。如果主要内容高于菜单，这可能不是你想要的：

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

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

你可以纠正这种行为给予的主要内容a margin-left 等于宽度的菜单：

float2http://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 或 absolute 或 relative 定位可以帮助你实现非常具体目标的布局，但重要的是要知道如何使用它们。正如已经说明的， 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" />

你可以使用浮

<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;}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top