0

我有一个 div 'container' ，它包含我所有的内容并设置为 80% 宽度。在那个 div 里面，我有 div 'tophead'，它包含一个 100% 的徽标和一个导航栏（但它只到达父级 80%）。然后我有'maincont'，它位于'container' div 内并有一个图像。我希望此图像与“容器”div 的一侧对齐，以便仍有 20% 的空间保持打开状态。如果我向左浮动或向左对齐，它会一直显示在屏幕左侧，超过 20% id，就像空白一样。任何想法如何解决这个问题将不胜感激。

如果有人能弄清楚为什么图像与我的导航栏重叠，则非常感谢。

jsFiddle：http: //jsfiddle.net/4JKus/4/

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="ccoheader.css">
    <title>Hello World</title>
  </head>
  <body>
    <div id="container">
        <div align="center" id="tophead">
        <img src="images/logo.png" alt="logo">
        <ul>
            <li><a href="#" title="About Us">About Us</a></li>
            <li><a href="#" title="Biographies">Biographies</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="Careers">Careers</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
        </div>
        <div align="center" id="maincont">
        <img src="images/secondimage.png" alt="image">
        </div>
    </div>
    </div>
  </body>

CSS：

html, body, #container {
    height: 100%;
    width: 100%;
    margin: 0;

}

#tophead {
    height: 20%;
    width: 80%;
    margin: auto;

}

#tophead img {
    height: 100%;
    width: auto%;
}
#tophead ul {
    list-style: none;
    display: inline-block;
    font-size: 0;

}
#tophead li {
    display: inline-block;

    }
#tophead a {
  background: #2dbaf0;
  color: #fff;
  display: block;
  font-size: 16px;
  font-family: "arial";
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition-property: background;
  -webkit-transition-duration: .2s;
  -webkit-transition-timing-function: linear;

}
#tophead a:hover {
  background: #f8a52b;
  color: #fff;
}
#tophead li:first-child a {
  border-left: none;
  border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

#maincont {
    height: 68%;
    width: 80%;
    padding-top: 2%;

    }
#maincont img{
    height: 100%;
    width: auto;
    border-radius: 30px;
    float: left;
}
4

2 回答 2

0

Getting rid of float:left in your #maincont img selector solves the first problem.

Problem 2 is down to the fact that you have a topheader of 20% and the nav bar overlaps this.. You can fix this by removing the stipulation that the top and bottom are fixed in size.

于 2013-02-21T20:39:47.290 回答
0

不确定这对解决您的问题有多远，但它是一个开始：

http://jsfiddle.net/4JKus/5/

在 div 声明中使用 align 属性被认为是错误的形式。你有一个流浪的 /div 闲逛。不知道为什么要强制图像和主容器达到 100% 高度。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="ccoheader.css">
    <title>Hello World</title>
  </head>
  <body>
    <div id="container">
        <div id="tophead">
            <img class="logo" src="images/logo.png" alt="logo">
            <ul>
                <li><a href="#" title="About Us">About Us</a></li>
                <li><a href="#" title="Biographies">Biographies</a></li>
                <li><a href="#" title="Services">Services</a></li>
                <li><a href="#" title="Careers">Careers</a></li>
                <li><a href="#" title="Contact">Contact</a></li>
            </ul>
        </div>
        <div id="maincont">
            <div class="maincont_col1">
                &nbsp;
            </div>
            <div class="maincont_col2">
                <img src="images/secondimage.png" alt="image">
            </div>
        </div>
    </div>
  </body>

CSS

html, body, #container {
    width: 100%;
    margin: 0;
}

#tophead {
    height: 20%;
    width: 80%;
    margin: auto;

}

#tophead img {
    width: auto%;
}
#tophead ul {
    list-style: none;
    display: inline-block;
    font-size: 0;

}
#tophead li {
    display: inline-block;

    }
#tophead a {
  background: #2dbaf0;
  color: #fff;
  display: block;
  font-size: 16px;
  font-family: "arial";
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition-property: background;
  -webkit-transition-duration: .2s;
  -webkit-transition-timing-function: linear;

}
#tophead a:hover {
  background: #f8a52b;
  color: #fff;
}
#tophead li:first-child a {
  border-left: none;
  border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

#maincont {
    width: 100%;
    padding-top: 2%;
    overflow: hidden;

    }
.maincont_col1{ width:20%; float:left; }
.maincont_col2{ width:80%; float:left; }

#maincont img{
    border-radius: 30px;
}
于 2013-02-21T20:23:00.820 回答