0

我的页面左上角有一个带有徽标的 div，我想在它旁边制作另一个 div，作为带有文本的工具栏。问题是我似乎无法弄清楚如何让新的 div 占据剩余空间的全部宽度......它只是试图使用屏幕的全部宽度并且文本显示在徽标的顶部。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
  div#topbar {
    width: 100%;
    position: fixed;
    top:0px;
    left:0px;
    height:133px;
    background-image :url(bkgnd_header_tile.jpg);
    padding: 0px;
    margin: 0px;
  }
  div#logo {
    width: 187px;
    height: 133px;
    position: fixed;
    top:0px;
    left:0px;
    background-image:url('headerlogo_home.jpg');
  }
  div#text {

  }

  body {

  }    
</style>
</head>
<body>
  <div id="topbar">
    <div id="logo"></div>
    <div id="text">
      <span id="campuses">asdf</span>
      <span id="title">Blah</span>
    </div>
  </div>
</body>
</html>

topbar 应该是一个高 133px 宽 100% 的大 div。它用于保存工具栏的图像背景。另一个 div 仅用于左上角的徽标，宽度为 187px。

如何使第三个 div 位于图像的右侧？

4

3 回答 3

2

如果我了解您要执行的操作，这就是您需要做的：设置顶栏的宽度。无需设置位置。

#topbar{
 width:100%;
 height:133px;
}

然后您必须将您的徽标浮动到左侧：

#logo{
 width:187px;
 height:133px;
 float:left;
}

然后将您的文本也设置为向左浮动并将宽度设置为 100%：

#text{
 width:100%;
 height:133px;
 float:left;
}
于 2012-11-28T22:53:40.110 回答
1

这对你有用吗？看起来你只漏掉了几行。

于 2012-11-28T22:49:40.440 回答
0

请记住，这是 CSS3 的东西，规范可能仍然会发生变化，但您可以查看 calc。

[ https://developer.mozilla.org/en-US/docs/CSS/calc ]

[ http://dev.w3.org/csswg/css3-values/#calc-notation ]

width: calc(100% - 187px);
于 2012-11-28T22:51:19.373 回答