Question

在我很痛苦的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;
}

Answer 1

基本上你可以使用这样的div-layout：

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

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

Answer 2

你正在获得重叠，因为你绝对定位#main-logo并且绝对定位会从文档的正常流程中删除元素，这意味着其他内容将不再尊重它的定位和“重叠”的位置绝对定位的内容是。如果你想把这个标志放在某个地方，我会用相对定位或使用一些余量。

Answer 3

与kinakuta的解释一起。您的标记也有一些错误。

<div id="outer-container">

是一个未公开的元素。

<br clear= "all" />

clear是痴迷的。在CSS中使用它。

Answer 4

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

试试这个：

#contactinfo {
  font-family:Tahoma, Geneva, sans-serif;
  font-size:10px;
  position:absolute;
  left: 187px;
  line-height: 160px;
}

不希望标题中的DIV重叠

4 个答案: