0

请原谅我缺乏设计知识，但我对 div 定位有点困惑。我有一个标题 div。在该标题中，我想要两个 div，一个用于徽标，另一个用于某些内容。我分别标记了它们的标志和卡片。但是，当我尝试将它们都放入 html 中并以正确的顺序调用它们时，卡片 div 只是位于徽标 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>

任何帮助是极大的赞赏。

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

4

3 回答 3

1

摆脱你所有的绝对定位。太垃圾了

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

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

#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;在为您计算左右数量时，在 DIV 的顶部和底部添加 0px 边距，使其居中。这仅适用于已知宽度。

好像你想把所有东西都放在中心。所以我会从一个wrapperDIV 开始并以它为中心。我用#wrapper.

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

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

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

于 2013-07-15T20:12:47.667 回答
1
  1. 您没有任何浮动元素，因此clear绝对没有效果。
  2. 绝对定位会从文档流中移除元素，因此浮动和清除不会对此类定位元素产生影响，因为浮动会调整其内容流中的元素。
于 2013-07-15T19:50:29.137 回答
0

避免absolute定位。同样的事情你可以用这样的东西来实现：

#header {
    height:440px;
    width: 100%;
    margin-top: 0px;
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
    padding: 5px;
    text-align:center;
}
#header .card {
    margin-left: auto;
    height: 367px;
    width: 999px;
    background:url(/assets/hback.png) 0 0 no-repeat;
    clear: both;
    padding: 5px;
}
于 2013-07-15T20:09:05.167 回答