1

在我对CSS（和stackoverflow！）非常陌生，并且似乎无法让我的标题中的div对齐并且不重叠。我有一个带有 align="absmiddle" 的徽标图像，因此 h1 文本位于它的右侧，这就是我想要的方式。我想要在 h1 下方（仍在徽标右侧）以小文本显示业务联系信息的另一行文本。当我添加带有联系信息的 div 时，它会显示在徽标后面。对于想要重叠的人以及不同浏览器和调整大小的问题，我已经看到了很多问题和解决方案，但似乎无法找到一些简单的东西来询问我在问什么。感谢你的帮助。

这是html：

<body>
<div id="outer-container">
<div id="header">
      <div id="main-logo">
        <h1><a href="#"><img src="images/Murray_Logo.gif" alt="Murray logo" width="144" height="144" align="absmiddle" />Company name here</a></h1>
      </div>
    <br clear= "all" />
      <div id= "contactinfo">address</div>
      <div id="main-menu">
        <ul>
          <li class="first-item">
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li class="last-item">
            <a href="#">Testimonials</a>
          </li>
        </ul>
  </div>
</div>
</body>

和CSS：

* {
  padding: 0;
  margin: 0;
}

a {
  color: #2D80D2;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

body {
  font-size: 11.5pt;
  line-height: 1.5em;
  color: #404040;
  background: #FFFFFF url('images/bg1.gif') repeat-x top left;
}

body,input {
  font-family: Georgia, serif;
}

br.clear-all {
  clear: both;
}

h1,h2,h3,h4 {
  letter-spacing: -1px;
}

h1,h2 {
  font-family: Century, serif;
}

h2 {
  font-size: 1.75em;
}

h2,h3,h4 {
  margin-bottom: 0.75em;
   color: #000;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1em;
}

p {
  margin-bottom: 1.25em;
}

ul {
  margin-bottom: 1.25em;
}

ul h4 {
  margin-bottom: 0.3em;
}

#header {
  height: 175px;
  position: relative;
  padding: 20px;
}

#outer-container {
  position: relative;
  width: 1200px; /* was 980px */
  margin: 90px auto 0 auto;
}

#inner-container {
  padding: 0;
  position: relative;
  width: 980px;
  margin: 25px 0 15px 0;
}

#inner-container .features {
  padding-left: 0;
  list-style: none;
}

#inner-container .features li {
  padding: 10px 0 10px 0;
  clear: both;
}

#inner-container ul {
  list-style: none;
}

#inner-container ul li {
  border-top: dashed 1px #B3B3B3;
  padding: 5px 0 5px 0;
}

#inner-container ul li.first-item {
  border-top: 0;
  padding-top: 0;
}

#main-logo {
  height: 145px; /* 6/7/12 DH */
  left: 20px;
  line-height: 107px;
  position: absolute;
  top: 0;
}

#main-logo a {
  text-decoration: none;
  color: #000;
}

#main-logo h1 {
  font-size: 2.2em;
}

#main-logo p {
    font-size:1em;
}

#main-logo img {
    padding: 0 20px 0 0;
}

#main-menu {
  width: 940px;
  border-bottom: solid 1px #1467B9;
  bottom: 0;
  border-top: solid 1px #5AADFF;
  line-height: 53px;
  margin: 0 0 0 0;
  padding: 0 20px 0 20px;
  height: 53px;
  left: 0;
  background: #1E71C3 url('images/bg2.gif') repeat-x top left;
  position: absolute;
}

#main-menu a {
  color: #FFF;
  /*letter-spacing: -1px; /* 6/7/12 DH */
  text-decoration: none;
}

#main-menu ul {
  list-style: none;
}

#main-menu ul li {
  display: inline;
  padding: 0 10px 0 10px;
}

#main-menu ul li.first-item {
  padding-left: 0;
}

#contactinfo {
  font-family:Tahoma, Geneva, sans-serif;
  font-size:10px;;
}

#contactinfo a {
  color: #404040;
}
4

4 回答 4

1

基本上你可以使用这样的 div 布局：

<div style="float:left;">LOGO</div>
<div style="float:left;">
  <div>COMPANY</div>
  <div>CONTACT</div>
</div>

就像您在左侧有徽标 div，在徽标 div 的右侧有 2 个 div（一个在另一个之上）用于公司和联系信息。

于 2012-06-08T05:17:03.277 回答
0

你得到了重叠，因为你已经绝对定位了#main-logo，并且绝对定位从文档的正常流程中删除了元素，这意味着其他内容将不再尊重它的定位和“重叠”绝对定位的内容所在的位置。如果您想将该徽标放在某个位置，我会使用相对定位或使用一些边距。

于 2012-06-08T05:23:41.017 回答
0

伴随着kinakuta的解释。您的标记也有一些错误。

<div id="outer-container">

是一个未闭合的元素。

<br clear= "all" />

clear已过时。在 CSS 中使用它。

于 2012-06-08T05:57:11.370 回答
0

在这种情况下，您header的位置是相对的，因此最好保留 idcontactinfo并position :absolute使用边距进行排列。

试试这个：

#contactinfo {
  font-family:Tahoma, Geneva, sans-serif;
  font-size:10px;
  position:absolute;
  left: 187px;
  line-height: 160px;
}
于 2012-06-08T06:10:59.750 回答