css - 居中和正确的元素 (div) 顺序

Question

请原谅我缺乏设计知识，但我对一些 div 定位感到困惑。我有一个标题分区。在该 header 中，我想要两个 div，一个用于 Logo ，另一个用于某些内容。我分别给他们贴上了标志和卡片的标签。但是，当我尝试将它们都放入 html 中并以正确的顺序调用它们时，卡片 div 只是位于 Logo div 之上而不是其下方。我已经尝试在 css 和 html 内联中使用几乎所有“clear: xxx”的变体，但它们没有任何效果。有人可以解释为什么这不起作用吗？在下面发布相关的 css 和 html。

#header {
    height:440px;
    width: 100%;
    margin-top: 0px;
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
    }
#header .logo {
    position:absolute;
    top: 3px;
    left: 50%;
    margin-left: -198px;
}
#header .card {
    position: absolute;
    left: 50%;
    margin-left: -500px;
    height: 367px;
    width: 999px;
    background:url(/assets/hback.png) 0 0 no-repeat;
    clear: left;
}

和 HTML:

<div id="header">
<div class="logo"><%= link_to image_tag("srlogo.png",alt:"Logo"), 'index.html' %></div>
<div class="card">Some text here</div>
</div>

非常感谢任何帮助。

编辑:所以，是的，显然我是一个白痴，因为我试图使用没有 float 元素的“清晰”。我现在明白了。那么，如何让一个部门低于另一个部门，而不是在另一个部门之上？

Answer 1

摆脱你所有的绝对定位。这是垃圾。

http://jsfiddle.net/2BpfF/1/

如果您希望 .logo DIV 在页面上居中并且您知道它的宽度，您可以这样做:

#wrapper {
     width: 999px;
     margin: 0 auto;
}
#header {
    height:416px;
    margin-top: 0px;
    }
#header .logo {
     margin: 0 auto;
     width: 333px;
}
#header .card {
     background-image: url(http://lorempixel.com/999/367/);
     background-repeat: no-repeat;
     height: 367px;
}

HTML

<div id="wrapper">
     <div id="header">
          <div class="logo"><img src="http://lorempixel.com/333/49/" /></div>
          <div class="card">Some text here</div>
     </div>
</div>

margin: 0 auto; 在为您计算左侧和右侧量时，将 0px 边距添加到 DIV 的顶部和底部，以便它居中。这仅适用于已知宽度。

似乎您想将所有内容居中。所以我将从一个 wrapper DIV 开始并将其居中。我用 #wrapper 做了这个。

请记住，源顺序很重要，默认情况下，您的 .logo DIV 将显示在您的 .card DIV 之前，没有任何 CSS。

您还可以从 #header DIV 中删除 width: 100%;，因为默认情况下所有 DIV 都是 block 级元素。除非另有说明，否则 block 级元素始终占据其包含元素的整个宽度。

至于背景图像的不透明度，我认为最好的解决方案是为您的图像文件而不是使用 CSS，因为我认为不透明度还不是很通用。我的意思是，如果您将 opacity: 0.5; 设置为 DIV，那么该 div 中的所有内容都是 50% 不透明的。我不是不透明度方面的专家，所以您必须更深入地研究一下。但我只是将图像编辑器中的不透明度设置为 50% 并输出一个 PNG 文件，这样 alpha(不透明度) channel 就会在那里。 JPG 文件没有透明度的 alpha channel 。